tags:

views:

126

answers:

2

I'm trying to trigger a hover state on a text link when hovering over its parent li. Is this possible in CSS and secondly, am I missing something with .children that would solve this issue. Here's the 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>

And the JS:

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

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

});
+4  A: 

You can do hover effects with just CSS like this (in your stylesheet):

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

No JS needed at all unless you need to support IE6 which only supports :hover on a elements.

UPDATE:

You could add something like this to your HTML if you need to also support 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]-->

Then adjust the CSS like this:

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

And finally, change your original HTML from a class to an id since IE6 doesn't support chained class names in CSS:

<li id="video-1">
Doug Neiner
A: 
.video-1:hover{color:#fff}
.video-1 .more { display: none }
.video-1:hover .more { display: block; z-index:10 }

z-index will ensure contents displayed above all elements on page

Mayur
hey doug, so just to be sure I wrote this up correct, this is supposed to:-on hover of li#video-1 (any part of the whole area)-add class to h3.show-title a the .more was just to show a link on hover, that part works, just the color change on the h3 doesn't. thanks so much!
David Fung
@David, this wasn't my answer, I was just fixing the formatting. I missed the `h3` part of your question originally, and I have updated my answer to reflect what you want. Still no jQuery is needed.
Doug Neiner
Dude, thanks so much Doug. You're the man!
David Fung