Question

考虑使用HTML，我在magic中有一个div class main。默认情况下隐藏magic类（使用CSS display:none）。如果鼠标移到magic div中的任何位置，我想显示div类main。这可以只用CSS完成吗？或者它必须使用jQuery？

<div class="main">       
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        <div class="magic">
            Hello, world
        </div>
</div>

CSS：

.main{  
    width: 400px; 
    border:1px solid red;
}

.magic{
    display:none; 
    margin-top:10px; 
    background:yellow; 
    padding:5px;
}

的jsfiddle： http://jsfiddle.net/uRrn8/1/

感谢您的帮助。

Answer 1

.main:hover .magic{  
     display:block;
}

在大多数浏览器中都应该为你做这件事。但是IE6可能非常严格，不支持悬停psuedo类以外的任何链接。如果您希望支持IE6，则必须使用javascript帮助函数来触发鼠标输入事件和可以附加到项目的CSS类。可以使用此技术的示例here。

Answer 2

是这样写的：

.main:hover .magic{  
    display:block
}

检查此http://jsfiddle.net/sandeep/uRrn8/2/

Answer 3

使用jquery，你可以这样做：

$('.main').hover(function() {
    $('.magic').css('display', 'block');
},

function() {
    $('.magic').css('display', 'none');
});

Answer 4

更新了您的小提琴，http://jsfiddle.net/uRrn8/4/

.main{width: 400px; border:1px solid red;}
.main:hover .magic{display:block;}
.magic{margin-top:10px; display:none; background:yellow; padding:5px;}

上面的代码应该有效。当使用类main（.main：hover）将你的div悬停时，你告诉div要显示类魔法。

Answer 5

这只能用CSS完成见http://www.clinic.ps 我在我的项目上做了它，看到菜单悬停如果你想要我可以在这里发布的代码

CSS：悬停时显示div

5 个答案: