3

I have a dropdown menu that's part of a JavaScript app. It's part of a row of buttons which are styled in a seperate CSS file. The dropdown menu creates a column of buttons that should be styled the same as the originating row.

I need the buttons in the dropdown menu to respond with the same :hover CSS as the row, but I'm having trouble because the mouse must be down for the dropdown menu to be visible. I can take the rules from CSS and write them into the JS like so:

    jQuery(texDiv).mouseover( function() {
      this.style.color = '#000000';
    });

But, I would prefer to reference the :hover CSS rule in some way, so that it is only written in one place in the code. I could just make all of the buttons' hover style be handled by jQuery mouseover adding a class, but now I'm curious about how this can be done.

So, how can I reference/force :hover CSS to take effect when mouse is down? Please direct me if I have missed this answer elsewhere!

4

2 回答 2

2

简单的解决方案 - 在鼠标悬停时添加另一个可以定义新颜色的类，在鼠标悬停时将其删除

于 2013-06-04T18:02:27.110 回答
1

强制一个:hover不会被其他浏览器理解的imo。您可以像这样在 css 中定义标记类：

// your seperate file
a:hover, .marker {
   // all your needs
}

因此，您可以轻松地将 css 类添加到您的

jQuery(texDiv).mouseover( function() {
  $(this).addClass('marker');
});
于 2013-06-04T18:15:04.273 回答