在鼠标悬停和鼠标悬停时显示隐藏 div答案

【问题标题】：show hide div on mouseover and mouseout在鼠标悬停和鼠标悬停时显示隐藏 div
【发布时间】：2014-03-11 13:32:21
【问题描述】：

<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。怎么办。

【问题讨论】：

你能把它们包装在一个共同的父级中吗？
所以把你的鼠标悬停的东西也放到侧边栏 html 上？
尝试将 onMouseOver 和 onMouseOut 事件放在您的 div 标签上。
我怎样才能通过这样做来解决这些问题@problemPotato
是的，但它有什么不同.. @epascarello

标签： javascript html

【解决方案1】：

如果您可以将它们包装在一个共同的父级中，那么只需使用 CSS 就很简单，不需要 JavaScript。

CSS：

#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 中。包装它可以避免这个问题。

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

【讨论】：

而且这个解决方案比 JavaScript 解决方案更好......除非你支持非常旧的 IE7，否则不需要使用 JavaScript 来做这样简单的事情。
“另请注意，不是每个人都使用鼠标。”是的 - 这不适用于触摸。不过还是不错的。

【解决方案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>

【讨论】：

onMouseOut 为我工作。代码：函数 ClosePopUp(id) { var div = document.getElementById(id); if (div != undefined && div != null) { div.style.display = "none"; } }

【解决方案3】：

这里是：

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>

【讨论】：

您错过了问题....代码与 OP 试图避免的问题完全相同。
令人困惑的问题，但工作的功能就在那里，只需切换元素。严厉的反对票。不过谢谢。
该代码与 OP 存在完全相同的问题。仅仅使用 jQuery 来显示和隐藏并不能解决它！制作小提琴并尝试将您的图像放在图像上。它应该保持可见。在你的它会隐藏。这就是OP试图弄清楚的。这就是你投反对票的原因。

【解决方案4】：

与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>

【讨论】：

除非图像和侧边栏重叠，否则这是行不通的。

【解决方案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>

【讨论】：

并且在不可见元素上没有鼠标事件。
是的，这就是我想说的，将其添加到我的答案中。
您是否将事件监听器添加到侧边栏？
mouseout 仍然会在图像上触发，因此它会隐藏.... 竞态条件，out 或 over 会先触发吗？

【解决方案6】：

我认为这是使用最新 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>

【讨论】：

【解决方案7】：

试试

<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>

【讨论】：

这有什么不同？