在mouseout上隐藏div

Question

我有两个人说'DIV A'和'DIV B'。鼠标悬停在DIV A上时，DIV B应该是可见的并且仍然显示。 DIV B包含很少的链接。现在我需要在这个DIV B的鼠标输出上隐藏DIV B.如何解决这个问题？

Answer 1

我摆弄了代码试试吧。

使用jquery

var diva = $('div.a'),
    divb = $('div.b')
divb.hide();
diva.on('mouseover', function(){
    divb.show();
});
diva.on('mouseout', function(){
    divb.hide();
});

http://jsfiddle.net/6fff9/1/

Answer 2

仅CSS解决方案（假设两个div都在div中）

的 Demo

HTML

<div id="container">
    <div class="divA">DIV A</div>
    <div class="divB">DIV B</div>
</div>

CSS

#container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container:hover > div {
    display: block
}
.divA{
    background:red;
    width:100px;
    height:100px;
}
.divB{
    background:green;
    width:100px;
    height:100px;
}

Answer 3

试试这个..

<div id="DIVA" onmouseover="show_div()">First Div</div>
<div id="DIVB" onmouseout="hide_div()" style="display:none">Second Div</div>
<script>
    function show_div() {
      $(DIVB).show();

    }
    function hide_div() {
      $(DIVB).hide();
   }
 </script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 4

试试这个：）

<script>
    $(document).ready(function(){
        $('#div-a').mouseenter(function(){
            $('#div-b').show();
        });
        $('#div-b').mouseout(function(){
            $(this).hide();
        });
    });
</script>

<div id='div-a' style='background-color: #ccc'>Div A</div>
<div id='div-b' style='margin-top: 5px; background-color: #888; display: none'>Div B</div>