Как вызвать состояние наведения ссылки при наведении на родительский LI. jQuery

Question

Как вызвать состояние наведения ссылки при наведении на родительский LI. jQuery

Я пытаюсь вызвать состояние наведения на текстовую ссылку при наведении на родительский элемент li. Возможно ли это в CSS и, во-вторых, я что-то упустил с .children, что бы решить эту проблему. Вот 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>

И JS:

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

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

});

6

jquery css css3

задан John Topley 4 September 2010 в 16:57

2 ответа

Другие вопросы по тегам:

jquery css css3

Похожие вопросы:

score 1 · Answer 1

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

z-index обеспечит отображение содержимого над всеми элементами на странице

score 11 · Answer 2

Вы можете создавать эффекты наведения, используя только CSS, как это (в вашей таблице стилей):

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

JS не требуется вообще, если вам не нужно поддерживать IE6, который только поддерживает : hover на a элементах.

ОБНОВЛЕНИЕ:

Вы можете добавить что-то подобное в свой HTML, если вам также нужно поддерживать IE6:

<!--[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]-->

Затем настройте CSS следующим образом:

#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 }

И, наконец, измените исходный HTML с class на id , поскольку IE6 не поддерживает цепочки имен классов в CSS:

<li id="video-1">