Question

我有一个div元素，当用户将鼠标悬停在div上时，我希望在其下方显示图片。通过Javascript可以对mouseover和mouseout事件执行此操作，但我希望使用CSS执行此操作。

那我怎么能用CSS做呢？

Answer 1

您可以使用CSS：选择器之后用于此效果。

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

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

Answer 2

您可以使用+或~ sibling selectors来http://jsbin.com/uvepiq/1/edit执行此操作：{{3}}

它们允许您对一个元素进行: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();
    });
});

关于javascript的鼠标悬停/鼠标移除与css的悬停在哪里悬停在div标签上的一些其他元素被更改

3 个答案: