开发者

trying to do a simple hover in javascript?

开发者 https://www.devze.com 2023-02-07 01:41 出处:网络
OnMouseOver=\"$(\'.class\') .hover (function(){ $(this).addClass(\'.hoverclass\'); }, function() { $(this).removeClass(\'.hoverclass\');
OnMouseOver="$('.class') .hover
    (function(){ 
 $(this).addClass('.hoverclass'); 
 }, function() {
   $(this).removeClass('.hoverclass');
  });" 

what am I do开发者_StackOverflow中文版ing wrong?


If you're trying to do the hover thing on all elements that have the class "class", then:

$('.class').hover(function() {
    $(this).toggleClass("hoverclass");
});

Live example

Changes from yours:

  • It's not a string. I'm not sure where your quote came from, but I'm thinking it was an HTML attribute. You would just put this somewhere during page load, like within a ready handler.
  • You don't include the leading dot when you're calling addClass / removeClass / toggleClass. The dot isn't part of the class name.
  • May as well use toggleClass, since that's what it's for.

Possibly worth mentioning that you don't need jQuery or JavaScript for this unless you need to support IE6. CSS already has this, the :hover pseudo-class. So you can put your styles there rather than in a separate hoverClass, e.g.:

.class:hover {
    text-decoration: underline;
    color: blue;
}

...would turn an element with class "class" blue with an underline when the mouse was over it.

Live example

In IE6 this only works on a elements; in IE7 upward and nearly all other browsers, it works on all elements.


Edit: In your note below, you say you only want to do this to one element (at least, I think that's what you're saying). You can do that by uniquely-identifying the element — either by where it is, or by using an id attribute. So for instance, to only do this for the element with the id "foo":

$('#foo').hover(function() {
    $(this).toggleClass("hoverclass");
});

Live example

(And that holds for the CSS solution as well:

#foo:hover {
    /* ...style rules here... */
}

Live example


You do not need to add jQuery commands to an onMouseOver event as a string. You, rather, execute jQuery, after DOM finishes rendering, and jQuery attaches and handles all the functions and events so you don't have to.

jQuery(document).ready(
  function() {
    // this function will be executed when DOM is ready

    // ...and this will attach your hover functions to
    // all the elements that have class 'class'
    jQuery('.class').hover(
      function(){ 
        jQuery(this).addClass('hoverclass'); 
      }, 
      function() {
        jQuery(this).removeClass('hoverclass');
      }
    );
  }
);


Remove the quotes from the right hand side of the expression. By having the quotes around, you are creating a String and not evaluating the expression. Also may I ask why you are storing the jQuery result object?


As T.J. Crowder points out, you really don't need to use Javascript to achieve this. All you need to do is use the CSS :hover pseudo-class, like this:

.some_element {
  color: #eee;
}
.some_element:hover {
  color: #fff;
}

Much cleaner, much simpler. Works in pretty much every modern browser, including IE7+.

0

精彩评论

暂无评论...
验证码 换一张
取 消