Question

我正在显示缩略图页面，如果将鼠标悬停在这些缩略图上，则会显示其说明。

为此我使用带有CSS的span元素

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

这最初工作正常。

但由于这需要在触摸设备上工作而触摸没有悬停，我添加了一个按钮来显示所有描述。

这也可以正常工作，但是一旦我使用了Button Toggle，说明我的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

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”，“”）;

Answer 2

添加！对您的班级规则很重要。 .css（）方法将样式添加到元素＆＃34;样式＆＃34;具有较高优先级的属性。

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

Answer 3

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

Answer 4

在你的代码中加上这个:: $（＆＃39; .thumbText＆＃39;）。removeAttr（＆＃34; style＆＃34;）;

CSS Hover被取消激活

4 个答案: