Question

当我将鼠标悬停在div圈上时如何显示该行？

＆＃13;

#line {
  display: none
}

＆＃13;

<div id='circle'>
  <div id= 'line'>

＆＃13;

Answer 1

首先，使用您的代码，不清楚<div>是兄弟姐妹是否嵌套。我会给你两个解决方案。

<强>嵌套

＆＃13;

div {
  padding: 10px;
  background: #99c;
}
#line {
  display: none;
  background: #9c9;
}
#circle:hover #line {
  display: block;
}

＆＃13;

<div id='circle'>
  <div id='line'>
  </div>
</div>

＆＃13;

<强>邻近

＆＃13;

div {
  padding: 10px;
  background: #99c;
}
#line {
  display: none;
  background: #9c9;
}
#circle:hover + #line {
  display: block;
}

＆＃13;

<div id='circle'>
</div>
<div id='line'>
</div>

＆＃13;

Answer 2

假设您使用的是jQuery，可以使用：

var enterHandler = function(){
   $("#line").show();
};

var leaveHandler = function(){
   $("#line").hide();
};

$("#circle").hover(enterHandler, leaveHandler);

Answer 3

如果您使用的是jQuery，那么您可以尝试：

$('#circle').on('mouseover', function() {
    $('#line').show();
});

$('#circle').on('mouseleave', function() {
    $('#line').hide();
});

Answer 4

jQuery最简单。

$('#circle').hover(function(){
    $('#line').css('display','inline');
});

或您要使用的任何显示属性。

Answer 5

在脚本标记中尝试此操作并使用onmouseover和onmouseout事件

<script>
    function hidediv() {
        document.getElementById('line').style.display = 'none';
    }
    function showdiv() {
        document.getElementById('line').style.display = 'block';
    }
</script>

    <div id='circle' onmouseover="hidediv();" onmouseout="showdiv();" > this is circle
        <div id= 'line'>this is line
        </div>
    </div>

如何使div消失/出现在其他div上？

5 个答案: