7

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

4

7 回答 7

14

听起来好像您的 javascript 工作正常，但这只是您的 CSS 规则的特殊性的问题，这就是!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;
}

目前，in 中的所有列表项都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 文章中所述，它通过为选择器的每个部分分配一个值来实现这一点，得分最高的部分获胜。要点是：

  • 元素选择器（例如：“ul”、“li”、“table”）= 1 分
  • 类选择器（例如：“.highlight”、“.active”、“.menu”）= 10 分
  • id 选择器（例如：“#someItem”、“#mainContent”）= 100 分

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

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

#someItem ul li = id + element + element = 100 + 1 + 1 = 102 分
.highlight = 班级 = 10 分

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

#someItem ul li.highlight
   = id + 元素 + 元素 + 类
   = 100 + 1 + 1 + 10
   = 112 分

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

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

...现在，鉴于.addClass()您之前所做的简单调用，li满足这些条件，所以边框应该变成灰色。

于 2009-05-11T04:20:10.260 回答
6

从 Jquery 1.3.3 开始，您将能够更简单地执行此操作。将会有一个增强版的 .toggleClass()可用，它会非常强大。

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

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

如果您必须包含 !important ，那么您的高亮类可能需要更具体（请参阅CSS Specificity）。

于 2009-05-11T03:36:58.410 回答
1

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

<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>
于 2009-05-11T01:16:03.150 回答
0

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");
    }
);

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

于 2009-05-11T02:21:33.947 回答
0

您是否考虑过纯 css 方法？

例如：

someClass {
    border: 1px solid white;
}

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

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

注意：正如有人评论的那样，这不适用于aIE 中的非元素。然而，它在 Chrome、Firefox、Safari 和 Opera 中对我有用。

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

于 2009-05-11T01:16:44.350 回答
0

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

#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }
于 2010-09-30T04:54:30.167 回答
0

这是我使用过的悬停示例：

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


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

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

您实际上不必将这么简单的东西分解成单独的功能。

我怀疑您的问题可能与 css 中的冲突有关 - 尝试通过硬编码来应用您的突出显示类，或者单击一下，看看它是否真的有效。

希望有帮助

吉姆

于 2009-05-11T01:22:02.827 回答