CSS：鼠标悬停时显示div

Question

考虑以下HTML代码，我在main标签中有一个名为magic的

标签。默认情况下，magic类被隐藏（使用CSS属性display:none）。如果鼠标在main标签内任何位置移动，我想要显示magic类的

标签。这个需求只能使用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/

感谢任何帮助。

- user966585

Answer 1

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

对于大多数浏览器，这应该就可以了。但是IE6非常严格，仅支持链接以外的悬停伪类。如果您想支持IE6，您将需要使用一个JavaScript辅助函数来触发鼠标进入事件和CSS类，您可以附加到项目上。这种技术的示例可在这里找到。

- PCasagrande

---

一个小提示是，如果你不使用像http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6这样的修复程序，那么这个方法在IE6中将无法工作。 - rtpHarry

没错。IE6对伪类（如hover）的支持非常不稳定。我正在更新它，以包含您的链接。谢谢您提醒我。 - PCasagrande

Answer 2

是的，就像这样写：

.main:hover .magic{  
    display:block
}

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

- sandeep

---

一个小提示是，如果你不使用像http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6这样的修复程序，它将无法在IE6中工作。 - rtpHarry

@rtpharry；每个人都知道，但谁关心IE6。 - sandeep

当你问客户使用的网络浏览器时，可能是你的客户或客户的客户会说“这是谷歌吗”。 - rtpHarry

Answer 3

使用jQuery可以实现：

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

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

- Nicola Peluchetti

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的div元素悬停时（.main:hover），你告诉具有类名为magic的div元素显示出来。

- Rob

Answer 5

这可以仅使用CSS完成 请参见http://www.clinic.ps 我在我的项目中制作了它，请查看菜单悬停效果 如果您需要代码，我可以在此发布

- Seder