Question

我正在尝试使用mouseover，mouseout，addClass和removeClass的组合创建一个简单的鼠标悬停效果。基本上，当用户将鼠标悬停在元素上时，我想应用不同的边框（1px灰色虚线）。初始状态是“1px纯白色”。我有一个名为“突出显示”的类，其中只有“border：1px dashed grey”。我想在onmouseout上添加该类，并在onmouseout上删除它，但除非我在“突出显示”类中使用！important，否则我无法获得我想要的效果。

Answer 1

听起来好像你的javascript工作正常，但这只是specificity of your CSS rules的一个问题，这就是为什么!important能让它发挥作用。

您必须使突出显示的css规则比非突出显示的规则更具体。

#someItem ul li { /* Specificity = 102 */
    border-color: white;
}

.highlight { /* Specificity = 10 -- not specific enough! */
    border-color: grey;    
}

#someItem ul li.highlight { /* Specificity = 112 -- this will work */
    border-color: grey;    
}

编辑并进一步说明：
假设HTML的相关部分如下所示：

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

你有这个CSS：

#someItem ul li {
    border: 1px solid white;
}
.highlight {
    border-color: grey;
}

目前，ul #someItem div中的所有列表项都会有一个白色边框，没有类highlight，所以没有灰色。

通过你想要的任何方式（在你的情况下是jQuery中的悬停事件），你可以在其中一个项目中添加一个类：

$(this).addClass('highlight');

HTML现在看起来像这样：

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

到目前为止，您的Javascript和HTML工作正常，但您看不到灰色边框！问题是你的CSS。当浏览器试图决定如何设置元素样式时，它会查看所有不同的选择器，这些选择器以元素和这些选择器中定义的样式为目标。如果有两个不同的选择器都定义相同的样式（在我们的例子中，边框颜色是有争议的），那么它必须决定应用哪种样式以及忽略哪种样式。它通过所谓的“特异性”来实现这一点 - 也就是选择器的具体程度。如HTML Dog article中所述，它通过为选择器的每个部分分配值来实现此目的，并且得分最高的那个获胜。要点是：

元素选择器（例如：“ul”，“li”，“table”）= 1分
类选择器（例如：“。highlight”，“。active”，“。menu”）= 10分
id选择器（例如：“＃someItem”，“＃mainContent”）= 100分

还有一些规则，例如：关键字!important以及内联样式，但这与此无关，呃......“课程”。您应该知道的另一件事是，如果两个选择器具有相同的特异性，那么文件中稍后定义的选择器将获胜。

回到你的问题，鉴于我们以前的CSS，我们可以看到为什么它仍然没有灰色边框：

#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points

如前所述，解决方案是创建一个更具体的选择器：

#someItem ul li.highlight
   = id + element + element + class
   = 100 + 1 + 1 + 10
   = 112 points

要在评论中回答您的问题，您无需更改任何javascript或HTML即可。如果你打破那个选择器，它的意思是：

查找id为“someItem”的元素，在其中查找ul元素，然后查找其上包含“highlight”类的li元素。

...现在，鉴于您之前进行的简单.addClass()调用，li符合这些条件，因此边框应变为灰色。

Answer 2

从Jquery 1.3.3开始，你可以做得更简单一些。将有enhanced version of .toggleClass()可用，这将是非常强大的。

如果您不需要将其分解为函数，那么从1.3.3开始，您将能够简单地执行此操作：

$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });

如果您必须包含！important，那么您的突出显示类可能需要更具体（请参阅CSS Specificity）。

Answer 3

我猜你在元素上使用内联样式作为初始样式：

<style type="text/css">
  .hover { border: 1px dashed gray; } /* will never apply */
</style>

...

<!-- this style has priority over class styles! -->
<div style="border: 1px solid white"> 
...
</div>

这将覆盖使用类应用的样式...因此，不要使用内联样式，只需使用不同的初始类来应用初始样式：

<style type="text/css">
  .normal { border: 1px solid white; }
  .hover { border: 1px dashed gray; }
</style>

...

<div class="normal">
...
</div>

Answer 4

您是否考虑过纯css方法？

例如：

someClass {
    border: 1px solid white;
}

someClass:hover {
    border: 1px dashed gray;
}

hover伪类将为您提供所需的行为：当用户被鼠标悬停在元素上时，它将使用较低的样式，否则它将使用第一种样式。

注意：有人评论说，这不适用于IE中的非a元素。但它确实适用于Chrome，Firefox，Safari和Opera。

它也适用于IE8和IE7标准模式中的任何元素。我没有用IE6来测试。

Answer 5

这是我用过的悬停的一个例子：

$(".myclass").hover(jbhovershow,jbhoverhide);


jbhovershow = function () {
            $(this).addClass("jimtest");
          }; 

jbhoverhide = function () {
            $(this).removeClass("jimtest");
          }

你真的不必将这么简单的东西分解成单独的函数。

我怀疑你的问题可能与css中存在冲突 - 尝试通过硬编码或点击来应用你的高亮类，看看它是否真的有效。

希望有所帮助

吉姆

Answer 6

CSS：

div.target {
    border: 1px solid #000000;
}

div.target-hover {
    border-color: #ff0000;
}

JS：

$("div.target").hover(
    function () {
        $(this).addClass("target-hover");
    },
    function () {
        $(this).removeClass("target-hover");
    }
);

我通常这样做。（允许更多选项）

Answer 7

或者您可以使用简单的CSS来完成：

#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }

mouseover（）mouseout（）jQuery add / removeClass问题

7 个答案: