Question

在下面的代码中，我试图隐藏第二个名为div的{{1}}，将鼠标悬停在＆＃39; show_div＆＃39;上，但代码确实有效，这应该是一个非常简单的代码，但为什么它不工作?? !!

hide_div

JSFIDDLE

Answer 1

你有没有试过这样的事情：

.show_div:hover + .hide_div {
display:none;

请注意，仅当.hide_div是.show_div的直接兄弟时，此功能才有效。如果由于某种原因，您必须在它们之间放置一个元素，请改为使用它：

.show_div:hover ~ .hide_div {
display:none;

FIDDLE

Answer 2

请试试这个CSS：

.show_div {
        width: 300px;
        height: 50px;
        background-color:red;
        display: block;
        }
        .hide_div {
        width: 300px;
        height: 50px;
        background-color: orange;
        margin-top: 50px;
        display: block;
        }
        .show_div:hover + div{display:none !important;}

Answer 3

检查此http://jsfiddle.net/rc4X6/

.show_div:hover + .hide_div 
{
    display:none;
}

Answer 4

$(document).ready(function(){
 $(".show_div").hover(function() {
      $(".hide_div ").hide();   
    });

});

在脚本标记

中使用它

Answer 5

希望这会对你有所帮助

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Trying to hide a div</title>

    <style type="text/css">
    .show_div {
    width: 300px;
    height: 50px;
    background-color:red;
    display: block;
    }
    .hide_div {
    width: 300px;
    height: 50px;
    background-color: orange;
    margin-top: 50px;
    display: block;
    }

    </style>
    <script>
    function z()
    {
        document.getElementById("hid").style.display="none";

    }
    function zz()
    {
        document.getElementById("hid").style.display="";

    }
    </script>
    </head>
    <body>
    <div class="show_div"  onmouseover="z()" onmouseout="zz()">
    </div>

    <div class="hide_div" id="hid">
    </div>

    </body>
    </html>

在徘徊在另一个上面时隐藏div？

5 个答案: