鼠标移入和移出时显示/隐藏div

Question

<script type="text/javascript">
function show_sidebar()
{
document.getElementById('sidebar').style.visibility="visible";
}

function hide_sidebar()
{
document.getElementById('sidebar').style.visibility="hidden";
}
</script>

<img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()"     onMouseOut="hide_sidebar()">

<div id="sidebar">some thing</div>

这是我用于在鼠标悬停和移出时显示和隐藏侧边栏div的代码。它可以工作，但我想要的是当我悬停在图像上时，侧边栏div被显示，并且我希望侧边栏div也在鼠标悬停在侧边栏上时显示。你如何做到呢。

- user3304709

---

你能把它们包装在一个共同的父级中吗？ - epascarello

那么，将您的onmouseover内容放到侧边栏HTML中？ - Marc B

尝试在您的div标签上添加onMouseOver和onMouseOut事件。 - problemPotato

我该如何通过这种方式解决那些问题@problemPotato - user3304709

是的，但这会有什么不同吗？@epascarello - user3304709

不，它没有任何意义 @epascarello - user3304709

Answer 1

如果你能将它们包在一个共同的父元素中，只需使用CSS就可以轻松实现，不需要JavaScript。

CSS：

如果您可以将它们包装在共同的父元素中，则只需使用CSS即可实现简单操作，无需使用JavaScript。

#sidebar {
    display: none;
}
.cart:hover #sidebar {
    display:block;
}

HTML：

<div class="cart">
    <img src="images/cart.jpg" width="80px" height="30px" />
    <div id="sidebar">some thing</div>
</div>

示例：

JSFiddle

不必包裹，但您必须确保图像和div重叠，以便鼠标可以移动到div中。包裹它可以避免这个问题。

此外请注意，不是每个人都使用鼠标。

- epascarello

---

而且这个解决方案比JavaScript的解决方案更好...除非你正在支持非常旧的IE7，否则没有必要使用JavaScript来执行像这样简单的操作。 - epascarello

还要注意，不是每个人都使用鼠标。是的 - 这在触摸屏上行不通。但还是很好的。 - plugincontainer

Answer 2

将事件处理程序移动到一个包装 div 中，以实现您想要的效果。

<div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">
  <img src="images/cart.jpg" width="80px" height="30px">
  <div id="sidebar">some thing</div>
</div>

- Johan

---

onMouseOut 对我有用。代码：function ClosePopUp(id) { var div = document.getElementById(id); if (div != undefined && div != null) { div.style.display = "none"; } } - Sudhanshu Pal

Answer 3

使用CSS来简化操作。

 <style>
   #sidebar{
       display : none;
   }
   img:hover ~ #sidebar {
       display : block;
   }
    #sidebar:hover {
       display : block;
   }
</style>
<img src="images/cart.jpg" width="80px" height="30px" >

<div id="sidebar">some thing</div>

有延迟：

<style>
#sidebar{

    opacity : 0;
}
img:hover ~ #sidebar {
    opacity : 1;
}
 #sidebar:hover {
    opacity : 1;
}
 #sidebar:not(hover) {
    animation-delay:2s;
    -webkit-animation-delay:2s;
    -webkit-transition: opacity 1s ease-out;
    opacity : 0;
}
</style>

- أنيس بوهاشم

---

除非图像和侧边栏重叠，否则这不会起作用。 - epascarello

Answer 4

这是它：

http://jsfiddle.net/luckmattos/CV9uX/

使用jQuery

$('#img').hide(); 

$('#sidebar').mouseover(function () {
      $('#img').show();      
});
$('#sidebar').mouseout(function () {
      $('#img').hide();      
});

HTML

<a id="sidebar">Show on Over</a>

<div class="img"><img src="http://www.highsnobiety.com/files/2013/05/lamborghini-egoista-concept-car-9.jpg" width="250px" id="img">
    </div>

- Mattos

---

你没有理解问题...代码存在与原帖作者想要避免的完全相同的问题。 - epascarello

混淆的问题，但函数可用，只需交换元素。严厉的反对票。但还是谢谢。 - Mattos

代码存在与OP相同的问题。仅使用jQuery来显示和隐藏是无法解决问题的！创建一个fiddle并尝试将图像放在图像上。它应该保持可见状态。在您的代码中，它将被隐藏。这就是OP试图解决的问题。这就是为什么您会收到负评的原因。 - epascarello

Answer 5

不可见元素没有鼠标事件。尝试这样做：

<script type="text/javascript">
function show_sidebar()
{
document.getElementById('sidebar').style.opacity = 1;
}

function hide_sidebar()
{
document.getElementById('sidebar').style.opacity = 0;
}
</script>

<img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">
<div id="sidebar" style="opacity: 0;" onMouseOver="show_sidebar()">some thing</div>

- Ood

---

一个不可见的元素上没有鼠标事件。 - epascarello

是的，那就是我想说的，我已经将它添加到我的答案中了。 - Ood

你是否将事件监听器添加到侧边栏了？ - Ood

mouseout事件仍然会在图像上触发，因此它将隐藏...竞态条件，out还是over先触发？ - epascarello

Answer 6

尝试

<script type="text/javascript">
function show_sidebar()
{
document.getElementById('sidebar').style.display="block";
}

function hide_sidebar()
{
document.getElementById('sidebar').style.display="none";
}
</script>

<img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()"     onMouseOut="hide_sidebar()">

<div id="sidebar">some thing</div>

- Mostafa King

---

这有什么不同吗？ - epascarello

Answer 7

我认为这是使用最新的jQuery版本的最佳且简单的方法。

<script>
$(document).ready(function(){
$("#div2").hide();
$("#div1").mouseover(function(){
$("#div2").fadeIn();
});
$("#div1").mouseout(function(){
$("#div2").fadeOut();
});
});

</script>

<div id="div1">Move the mouse pointer over this paragraph.</div>
<div id="div2" >div2.</div>

- Kiran