Hover text change opacity on div jquery

Question

I have a list panel with different words each word explains a div to the right. I'm trying to change the opacity of the matching div to 1.0 when hovering the matching word.

<html> #HTML SETUP 
 <div class="Settings">
   <ul>
    <li class="SettingsSlideshow">
     <h3>Slideshow</h3>
    </li>
    <li class="SlideshowImage">
     <h4>Image</h4>
    </li>
    <li class="SlideshowTitle">
     <h4>Title</h4>
    </li>
   </ul>
  </div>

 <div class="Slideshow">
 </div>
</html> 

<script type="text/javascript"> #JAVASCRIPT
$(function(){
 $(".SettingsSlideshow").hover(function(){
  $(".Slideshow").css({opacity: 1.0});
 });
});
</script>

This is just one example of what I'm trying to achieve. This don't work, Do I need to define x:hover in css as well? I have defined a opacity: 0.7 on each div in css. Mabye I need to define it: (".Settings ul li SettingSlideshow")?

Thanks for help!

Answer 1

<script type="text/javascript">
$(function(){
 $(".SettingsSlideshow").hover(function(){
  $(".Slideshow").css({opacity: 1.0});
 },function(){
$(".Slideshow").css({opacity: 0.0});// here set your rest opacity between 0 to 1

});
});
</script>

reference hover

Hover text change opacity on div jquery

Question

1 answers

solution1
1 ACCPTED 2013-09-16 08:58:59

Hover text change opacity on div jquery

Question

1 answers

solution1 1 ACCPTED 2013-09-16 08:58:59

solution1
1 ACCPTED 2013-09-16 08:58:59