javascript - 在 javascript 的 mouseover/mouseout 与 css 的悬停时，在 div 标签上悬停时，其他一些元素会发生变化

Question

我有一个div元素，当用户将鼠标悬停在div. 通过 Javascript 可以使用mouseover和mouseout事件执行此操作，但我想使用CSS.

那么如何使用 CSS 来实现呢？

Answer 1

您可以使用 CSS :after 选择器来实现此效果。

#myDIV:hover:after
{
    content: '';
    display: block;
    position: absolute;
}

从那里您可以将其设置为以图像为背景的常规元素，或根据自己的喜好编辑内容字段。当您将鼠标悬停在#myDIV 上时，这将插入一个伪元素。如果您需要对旧版浏览器的支持，您可以考虑使用您的 javascript 代码作为后备，并使用modernizr来检测浏览器功能。

Answer 2

您可以使用兄弟选择器来执行此操作，例如+或~：http: //jsbin.com/uvepiq/1/edit

它们将允许您:hover检查一个元素并将样式应用于以下同级元素。所以图像的正常样式将被隐藏display: none，然后当它的前一个兄弟悬停时，您可以将其设置为display: block或其他样式。

Answer 3

你可以用 CSS 做到这一点：

<div class="outer">
    Texty Texterson...
    <div><img src="http://codinghorror.typepad.com/.a/6a0120a85dcdae970b0128776ff992970c-pi" /></div>
</div>

CSS：

.outer div{
    display: none;
}

.outer:hover div{
    display: block;
}

但我会说用 jQuery/javascript 做这个可以让你做一些很好的效果，比如淡入淡出等：

$(document).ready(function () {
$('.outer').hover(
    function () { 
        $(this).find('div').fadeIn();
    }, 
    function () { 
        $(this).find('div').fadeOut();
    });
});