我正在尝试使用mouseover、mouseout、addClass和removeClass等方法创建一个简单的鼠标悬停效果。基本上,当用户将鼠标悬停在元素上时,我想应用不同的边框(1像素虚线灰色)。初始状态为“1像素实线白色”。我有一个名为“highlight”的类,其中只有“border: 1像素虚线灰色”。我想在mouseover时添加该类,并在mouseout时删除它,但除非我在“highlight”类中使用!important,否则无法获得我想要的效果。
我正在尝试使用mouseover、mouseout、addClass和removeClass等方法创建一个简单的鼠标悬停效果。基本上,当用户将鼠标悬停在元素上时,我想应用不同的边框(1像素虚线灰色)。初始状态为“1像素实线白色”。我有一个名为“highlight”的类,其中只有“border: 1像素虚线灰色”。我想在mouseover时添加该类,并在mouseout时删除它,但除非我在“highlight”类中使用!important,否则无法获得我想要的效果。
!important
可以使其工作的原因。#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;
}
目前,#someItem div
中的 ul
所有列表项都具有白色边框,并且没有任何类名为 highlight
的元素,因此没有灰色。
通过您想要的任何方式(在 jQuery 中使用悬停事件),您可以向其中一个项目添加类:
$(this).addClass('highlight');
<div id="someItem">
<ul>
<li>Item 1</li>
<li class="highlight">Item 2</li>
<li>Item 3</li>
</ul>
</div>
!important
和内联样式,但这对于本“课程”大多数都不相关。您唯一需要知道的另一件事是,如果两个选择器具有相同的特异性,则文件中后定义的选择器获胜。#someItem ul li = id + element + element = 100 + 1 + 1 = 102分 .highlight = class = 10分如前所述,解决方法是创建更具体的选择器:
#someItem ul li.highlight = id + element + element + class = 100 + 1 + 1 + 10 = 112 点并回答您在评论中的问题,您不需要更改任何javascript或HTML即可使其正常工作。如果您分解该选择器,它的含义是:
现在,鉴于您之前简单的addClass()调用,li满足这些条件,因此边框应变为灰色。查找ID为“someItem”的元素,在其中查找ul元素,然后查找带有“highlight”类的li元素。
$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });
如果您需要使用!important,则可能需要让您的突出显示类更加具体(请参见CSS特异性)。
我猜测您在元素上使用了内联样式来设置初始样式:
<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>
或者您可以使用简单的CSS来完成:
#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }
someClass {
border: 1px solid white;
}
someClass:hover {
border: 1px dashed gray;
}
hover
伪类将为您提供所需的行为:当用户将鼠标悬停在元素上时,它将使用较低的样式,否则它将使用第一个样式。
注意:正如某人评论的那样,在 IE 中,这对于非 a
元素不起作用。但是,在 Chrome、Firefox、Safari 和 Opera 中,它确实可以工作。
在 IE8 和 IE7 标准模式下,它也适用于任何元素。虽然我没有 IE6 进行测试。
这是我使用的一个悬停效果示例:
$(".myclass").hover(jbhovershow,jbhoverhide);
jbhovershow = function () {
$(this).addClass("jimtest");
};
jbhoverhide = function () {
$(this).removeClass("jimtest");
}
你真的不需要将这么简单的东西分成不同的函数。
我怀疑你的问题可能是与 CSS 冲突有关 - 尝试通过硬编码或点击应用你的高亮类,并查看是否确实起作用。
希望对你有所帮助。
Jim
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");
}
);
我通常这样做。(可以有更多的选项)