Question

在悬停在另一个元素上时，我无法显示/隐藏div。我最终将它应用于图像映射，但我为功能做了一个简单的小提琴。我做错了什么？

<script>
$('#a1').hover(function () {
$('#t1').toggleClass("hidden");
});
</script>

<style>
.hidden {display:none;}
</style>

<div id="a1">test a1</div>
<div id="t1" class="hidden">timeline 1</div>

http://jsfiddle.net/4p7vLogd/

Answer 1

HTML

<div id="a1">test a1</div>
<div id="t1" class="hidden">timeline 1</div>

的jQuery

$(document).ready(function(){
    $('#a1').hover(function () {
        $('#t1').toggleClass("hidden");
    });
});

CSS

.hidden {
    display:none;
}

确保包含jQuery。这是一个分叉的小提琴： http://jsfiddle.net/2eyzce7h/

如果您的功能出现问题，请考虑使用mouseenter（）和mouseleave（）代替.hover（）。

Answer 2

穆罕默德的回答是可行的，但通常最好的做法是不要用CSS隐藏某些东西，并依赖于jQuery来显示用户禁用Java的可能性。这也应该有效：

$(document).ready(function(){

$('#a1').hide();

$('#a1').hover(
    function () {
        $('#t1').show();
    },
    function () {
        $('#t1').hide();
    });

});

这是fiddle。

在悬停时显示/隐藏div

2 个答案: