Wie Sie den Link-Hover-Status auslösen, wenn Sie den Mauszeiger über seine Eltern-LI halten. jQuery

Question

Ich versuche, einen Hover-Status auf einer Textverknüpfung auszulösen, wenn ich den Mauszeiger über seine Eltern li halte. Ist das in CSS möglich und zweitens fehlt mir etwas mit .children, das dieses Problem lösen würde. Hier ist der HTML:

<li class="video-1">          
    <a href="#"><img src="images/csi-1.gif" alt="csi-1" width="140" height="80" /></a> 
    <h3 class="show-title"><a href="#">Show TItle</a></h3> 
    <h3 class="ep-name"><a href="#">Episode Name</a></h3> 
    <h4 class="season-info">Season 4 | Ep 10<span class="more"><a href="#">See More</a></span></h4> 

</li> 

Und die JS:

$(".more").hide(); 

$(".video-1").hover(function() { 
$(".video-1:hover h3.show-title a").css('color', '#006699'),function() { 
    $(this).css("color", "#fff"); 
      }  
    $(".more").toggle(); 

}); 

Answer 1

Sie Hover-Effekte wie diese mit nur CSS tun können (in Ihrem Stylesheet):

.video-1 .more { display: none } 
.video-1:hover h3.show-title a { color: #006699 } 
.video-1:hover .more { display: block } 

Kein JS benötigt überhaupt es sei denn, Sie müssen IE6 unterstützen, die nur unterstützt :hover auf a Elemente.

UPDATE:

Sie etwas zu Ihrem HTML hinzufügen könnte, wenn Sie auch IE6 unterstützen müssen:

<!--[if lte IE 6]> 
<script type="text/javascript" charset="utf-8"> 
    jQuery(function ($) { 
    $('#video-1').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 
    }); 
</script> 
<![endif]--> 

dann die CSS wie folgt anpassen:

#video-1 .more { display: none } 
#video-1:hover h3.show-title a, #video-1.hover h3.show-title a { color: #006699 } 
#video-1:hover .more, #video-1.hover .more { display: block } 

Und schließlich, ändern Sie Ihren ursprünglichen HTML-Code von class zu id, da IE6 verkettete cl nicht unterstützt Namen in CSS ass:

<li id="video-1"> 

Answer 2

.video-1:hover{color:#fff} 
.video-1 .more { display: none } 
.video-1:hover .more { display: block; z-index:10 } 

z-index werden Inhalte über alle Elemente auf Seite