[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 11989
  • Last Modified:

how to set a mouseover effect using jQuery?

I'd like to do a simple toggle for mouseovers. I've 4 thumbnail images, wrapped inside of links, and then one big DIV where a larger image can appear. The large image should depend on the last thumbnail that is mousedover. Of the 4 links, each is to have a border, when it has been chosen (that is mousedover). We are using text-decoration for the border. I'm trying this code:

jQuery(document).ready(function() {
  $(".view-thumb img").mouseover(function() {
   // get rid of the text decoration on all 4 thumbnails
   $(".view-thumb").css("text-decoration", "none");
   
   // now reapply the text-decoration to this particular link
    this.parentNode.style.textDecoration = "underline";
alert(this.parentNode.id);
  });
});

The alert() gets the id of the link, and when I look at in the browser, I can see that the code is correctly finding the link. Therefore, it seems to be I should be able to set its text decoration. I know I've got the right node because I've seen the id in that alert().



This doesn't seem to work at all. This seems to have no effect on the textdecoration of the element. The CSS style sheet is causing the link to have text-decoration on hover, but we want more than hover - if you mouseout of one thumbnail, but you don't mouse over another thumbnail, you'r last thumbnail should contiue to have text decoration.

What am I doing wrong?


These are some additional notes:


// this bit of CSS:
//
//          a:hover{
//                  text-decoration:underline;
//          }
//
// which is on line 16 of styles.css, causes a border to
// appear around the 4 small thumbnails that are underneath
// the main product image on the page. We need to make this
// border permanent, rather than merely onhover.
//


The HTML of the 4 thumbnails: 
 
<div id="prod-views">
       	<a id="view-1" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
    <a id="view-2" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
   <a id="view-3" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
    <a id="view-4" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
</div>
 
 
My jQuery code:
 
 
 
 
jQuery(document).ready(function() {
  $(".view-thumb img").mouseover(function() {
   // get rid of the text decoration on all 4 thumbnails
   $(".view-thumb").css("text-decoration", "none");
   
   // now reapply the text-decoration to this particular link
    this.parentNode.style.textDecoration = "underline";
alert(this.parentNode.id);
  });
});

Open in new window

0
lkrubner
Asked:
lkrubner
  • 3
1 Solution
 
hb69Commented:
Start with this and work your way out:

<style type="text/css">
#menusample_this
{
      list-style-type: none;
      }
   
</style>
<script type="text/javascript">

$(document).ready(function(){

$(function() {
  $("#menusample_this img").hover(function() {
        $(this).attr("src", $(this).attr("src").split(".").join("-hover."));  // adds -hover to the name of the image
  }, function() {
        $(this).stop(true,false); // prevents the creation of stacked actions
        $(this).attr("src", $(this).attr("src").split("-hover.").join("."));  // removes -hover from the name of the image
  });
});

  }); // end docready
</script>

<h1>Rollovers - Abbreviated Method Calls</h1>
<p>From: <a target="_blank" href="http://www.shopdev.co.uk/blog/jquery-rollovers-using-this/">JQuery Rollovers Using this</a></p>
<p>Sample provides no easing, just simple rollover done easier in CSS, but as a demo it provides an example of chaining and attribute manipulation.</p>
<p> &nbsp; </p>

<ul id="menusample_this">
      <li><a href="#"><img src="/images/item1.gif" border="0" /></a></li>
      <li><a href="#"><img src="/images/item2.gif" border="0" /></a></li>
      <li><a href="#"><img src="/images/item3.gif" border="0" /></a></li>
</ul>
0
 
hb69Commented:
Here's another sample, this one NOT using images.

CSS:

<style type="text/css">
#btnLogout
{
      margin-right: 15px;
      float: right;
      width: 120px;
      height: 22px;
      background-color: #6E6E45;
      padding-top: 8px;
      padding-bottom: 8px;
      font-family: Verdana;
      font-weight: bold;
      font-size:10pt;
      color: #ffffff;
      text-decoration: underline;
      text-align: center;
      border: 1px;
      border-style: solid;
      border-color: #000000;
      cursor: pointer;
      /* ie opacity */
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      /* all others opacity
      opacity: 0.5;
      -moz-opacity:0.5;*/
}

#btnLogout a
{

      color: #ffffff;
      text-decoration: underline;

}
</style>

JQUERY:

    $(function() {
        $("#btnLogout").hover(function() {
            $(this).fadeTo(600, 1); // fadeIn() only works if target is totally fadedOut
        }, function() {
            $(this).stop(true,false); // prevents the creation of stacked actions
            $(this).fadeTo(400, 0.5);
        });
    });

HTML

<div id="btnLogout">click to start</div>

0
 
Albert Van HalenCommented:
Hi lkrubner.
Ok. If you want a border around the link where the inner content is just an image, you should specifiy style of the image to have a border.
IE border: medium none; border-bottom: 1px solid

When mouse-overing the image, you want to set the border right? And it should stay there until another image is moused over?

The best thing you can do is specify a style rule IE: img.mouseover.
You can easily add the class to the element on which the event is bound, and remove those classes from other elements.
Try this
<style type="text/css">
img.mouseover
{
    border: medium none;
    border-bottom: 1px solid;
}
</style>
 
<script type="text/javascript">
$(function() {
    $(".view-thumb img").mouseover(function() {
        // get rid of the text decoration on all 4 thumbnails by removing the class
        $("img.mouseover").removeClass("mouseover");
        // add the class to the specific image
        $(this).addClass("mouseover");
    });
});
</script>

Open in new window

0
 
hb69Commented:
The reason why I provided two basic samples is IMHO you can see how basic selectors and basic functions work in JQuery.  You should start with these and do some reading in the documentation portion of the JQuery website - look under "Selectors" and "Manipulation".

http://docs.jquery.com/Selectors/id#id
http://docs.jquery.com/Effects/fadeIn#speedcallback


Also, you might want to review how CSS is applied in those samples.  In your sample you have text-decoration being applied to images, which is a no-go.  Border is for images and text-decoration is for text.  Bear in mind also that when you hover over an element that you are switching classes

http://docs.jquery.com/CSS

Also check out how CSS is manipulated in the second sample on this page: http://docs.jquery.com/CSS/width

Also, the JQuery doc.ready should look like:

<script type="text/javascript">
$(document).ready(function(){

   // stuff here

}); // end docready
</script>

Good luck!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now