Question

我不知道为什么这一点jquery不能用于我的代码 - 这里是：

$(document).ready(function () {
$(".dl").hover(function (u) {
        $(".pdf:hover").show();
    },
    function (u) {
        $(".pdf:hover").hide();
    });
});

当我将鼠标悬停在.dl：

上时，应该这样做

.dl {
    font-size: .6em;
    color: #fff;
    white-space: nowrap;
    padding: 0;
    margin: -78px 0 0 63%;
    text-align: left;
}

.dl a, a:active, a:visited {
    color: #fff; 
}

.dl a:hover {
    color: #33b5e5;
}

.pdf：悬停显示，没有？

.pdf {
    background: url("images/ref_button.png") no-repeat;
    background-size: 100%;
    height: 115px;
    max-height: 115px;
    width: 101px;
    max-width: 101px;
    padding: 0;
    margin: -120px 0 0 45%;
    display: block;
}

.pdf:hover {
    background: url("images/ref_button_hover.png") no-repeat;
    background-size: 100%;
    height: 115px;
    max-height: 115px;
    width: 101px;
    max-width: 101px;
    display: block;
}

悬停工作正常，只是jquery位不起作用。有什么建议？我唯一可以想到的是：将鼠标悬停在.pdf类上就是它正在破坏它，但我尝试使用一个完全独立的.pdfhover类，它仍然无法正常工作，所以也许不... gah！< / p>

任何帮助将不胜感激！谢谢！

Answer 1

变化：

$(".pdf:hover").show();

到

$(".pdf").show(); //similar change for hide() too

<强>更新你可以将一个班级pdfhover悬停在pdf中，比如

.pdfhover {
    background: url("images/ref_button_hover.png") no-repeat;
    background-size: 100%;
    height: 115px;
    max-height: 115px;
    width: 101px;
    max-width: 101px;
    display: block;
}

并且做，

$(".dl").hover(function (u) {
        $(".pdf").addClass("pdfhover");
    },
    function (u) {
        $(".pdf").removeClass("pdfhover");
    });

Answer 2

它的负边缘混乱......删除它们并且它有效。 Fiddle在纯JS中......也确保引用JQuery Library。

jquery悬停功能无法正常运行

2 个答案: