jQuery hover hjælp.

Software d. 24. april. 2011, skrevet af AberdeeN

Vist: 714 gange.

Superbruger
Tilføjet:
24-04-2011 15:03:25
Svar/Indlæg:
327/125

Hej alle sammen..

Jeg sidder med et lille problem og mon ikke der er en af Jer der ude, som lige ved hvad der mangler for det virker.

Jeg har to div boxe(den blå og den grønne), når man køre musen over dem skal der hover en ny div frem med nogle links. Dette kan jeg godt få til at virke på den blå div, men på den grønne vil den ikke. Hvad gør jeg galt?

Min kode ser sådan her ud.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DT...
<html xmlns="http://www.w3.org/1999/xhtml&q... xml:lang="en" lang="en">
<head>
<title>Fade In/Out Test</title>
<style type="text/css">
.hover { width: 100px; height: 100px; background-color:#39C; float:left;}

.links {
float: left;
width: auto;
margin-right: 1em;
}

.box {display: none;}

.h { width: 100px; height: 100px; background-color:#6C9; float:left;}

.l {
float: right;
width: auto;
margin-right: -1em;
}

.b {display: none;}

</style>
<script src="http://code.jquery.com/jquery-...
<script type="text/javascript">
$(document).ready(function() {
var hide = false;
$(".hover").hover(function(){
if (hide) clearTimeout(hide);
$(".box").fadeIn();
}, function() {
hide = setTimeout(function() {$(".box").fadeOut("slow");}, 250);
});
$(".box").hover(function(){
if (hide) clearTimeout(hide);
}, function() {
hide = setTimeout(function() {$(".box").fadeOut("slow");}, 250);
});

var hide = false;
$(".h").h(function(){
if (hide) clearTimeout(hide);
$(".b").fadeIn();
}, function() {
hide = setTimeout(function() {$(".b").fadeOut("slow");}, 250);
});
$(".b").h(function(){
if (hide) clearTimeout(hide);
}, function() {
hide = setTimeout(function() {$(".b").fadeOut("slow");}, 250);
});
});
</script>
</head>
<body>
<div class="hover"></div>
<div class="box">

<div class="links">
<ul>
<li class="rss"><a href="feed://feeds.feedburner.com">Feed 1</a></li>
<li class="rss"><a href="feed://feeds.feedburner.com">Feed 2</a></li>
<li class="rss"><a href="feed://feeds.feedburner.com">Feed 3</a></li>
</ul>
</div>

</div>

<div class="h"></div>
<div class="b">

<div class="l">
<ul>
<li class="rss"><a href="feed://feeds.feedburner.com">Feed 1</a></li>
<li class="rss"><a href="feed://feeds.feedburner.com">Feed 2</a></li>
<li class="rss"><a href="feed://feeds.feedburner.com">Feed 3</a></li>
</ul>
</div>

</div>
</body>
</html>

Sweet_Dane

Superbruger
Tilføjet:
01-05-2011 18:55:14
Svar/Indlæg:
138/1

Hej
Det ser ud som om din .l gemmer sig når du floater right.
l {
float: right; skal være left
width: auto;
margin-right: -1em;
}

husk "float:clear,both" for at nulstille :)http://css.maxdesign.com.au/fl...

håber det hjalp. Det var så langt min viden går :)