CSS悬停（Hover）被禁用

Question

我正在展示一组缩略图，当你将鼠标悬停在上面时，它们的描述会显示出来。

为此，我正在使用带有CSS样式的span元素。

.thumb:hover .thumbText {
    display: inline-block ;
}

这一开始运作得很好。

但是由于需要在触摸设备上使用，而触摸没有悬停效果，所以我添加了一个按钮来显示所有描述。

这也很好用，但是一旦我使用了按钮切换描述，我的JavaScript函数就会禁用CSS悬停效果，我无法弄清楚为什么。

var CaptionsOff = true;
function toggleCaptions() {
    if (CaptionsOff) {
        /* Turn Captions ON */
        $('.thumbText').css("display", "inline-block")
        $("#btnCaption").html("Hide Thumb Captions");
        CaptionsOff = false;
    } else {
        /* Turn Captions OFF */
        $('.thumbText').css("display", "none")
        $("#btnCaption").html("Show Thumb Captions");
        CaptionsOff = true;
    }

这个网站是：

http://mclportal.net/wcit/June26.html

- mcl

---

不要使用 display，尝试使用 visibility。使用 visibility:hidden; 隐藏文本，使用 visibility:visible; 显示文本。 - Pugazh

你说的“禁用CSS悬停”是什么意思？它的工作方式正如我所期望的那样。 - Jon

在使用按钮“显示/隐藏拇指标题”后，它无法正常工作 OSX MountLion与Chrome、Safari和Firefox浏览器。 - mcl

Answer 1

那段 JavaScript 代码会将 CSS 添加到元素的 style 属性中。例如：

<span style="display:none">Caption</span>

样式属性优先于CSS文件。若要更改此设置，请像这样修改您的CSS脚本：

.thumb:hover .thumbText {
    display: inline-block !important;
}

这段代码意味着使用CSS中的显示方式，而不是属性中的显示方式。

此外，您缺少分号。

希望这有所帮助。

替代方案：

切换一个类

$(".buttonCaption").toogleClass("showCap")

.thumb:hover .thumbText, .showCap {
    display: inline-block;
}

将显示设置为“无”，而不是“无”。假设字幕在CSS中默认为display：none。其他两个解决方案可能比这个更好。 $('.thumbText').css("display", "");

- rubenwardy

---

只要你知道怎么做，这就很简单了。这就是这个地方的用处。感谢大家。 - mcl

Answer 2

在你的类规则中添加 !important。.css() 方法将样式添加到元素的“style”属性中，该属性具有更高的优先级。

.thumb:hover .thumbText {
    display: inline-block!important ;
}

- Olav Kokovkin

Answer 3

在toggleCaptions()中将内联样式设置为$('.thumbText')会覆盖样式表。应该使用切换类而不是设置内联样式。

- Teemu

Answer 4

将此代码放在 else 语句中：$（'.thumbText'）.removeAttr("style");

- aashi