Fatal编程技术网
  • javascript/
  • Javascript 使用onmouseover/onmouseout更改可见性

Javascript 使用onmouseover/onmouseout更改可见性

javascript html css

Javascript 使用onmouseover/onmouseout更改可见性,javascript,html,css,onmouseout,Javascript,Html,Css,Onmouseout,我试图让一个img在onmouseover事件中消失，然后我希望这个img在onmouseout事件中再次出现，这是我到目前为止所做的： <body> <h1>Catch the Easter Bunny to get your egg!</h1> <img src="images/rabbit.png" id="rabbit1" onmouseover="" onmouseout="show(this);" alt="

我试图让一个img在onmouseover事件中消失，然后我希望这个img在onmouseout事件中再次出现，这是我到目前为止所做的：

<body>
    <h1>Catch the Easter Bunny to get your egg!</h1>
    <img src="images/rabbit.png" id="rabbit1" onmouseover=""
         onmouseout="show(this);" alt="Catch the rabbit"/>
    <img src="images/rabbit.png" id="rabbit2" onmouseover="hide(this);"
         onmouseout="show(this);" alt="Catch the rabbit"/>
    <img src="images/rabbit.png" id="rabbit3" onmouseover="hide(this)" alt="Catch the rabbit"/>
    <img src="images/rabbit.png" id="rabbit4" onmouseover="hide(this)" alt="Catch the rabbit"/>
    <h2 id="noeggs">No Easter Eggs for You</h2>
    <h2 id="yousuck">Humans suck!!!</h2>
</body>

var count = 0;

function hide(node) {
    count += 1;
    node.style.visibility = 'hidden';
}

function show(node) {
    node.style.visibility = 'visible';
}


抓住复活节兔子去拿你的蛋！
没有复活节彩蛋给你
人类很烂！！！
var计数=0；
函数隐藏（节点）{
计数+=1；
node.style.visibility='hidden'；
}
功能显示（节点）{
node.style.visibility='visible'；
}
尝试使用不透明度

node.style.opacity=0;
或

尝试使用不透明度

node.style.opacity=0;
或

你认为这会怎样？当您隐藏一个元素时，
onmouseout
事件将在您以某种方式移动鼠标光标后立即触发，元素将重新出现。这将导致光标移动时闪烁。这显然不是你想要的。您应该改变不透明度，而不是完全隐藏元素

您应该正确地获取目标元素：请参阅。

您希望它如何工作？当您隐藏一个元素时，
onmouseout
事件将在您以某种方式移动鼠标光标后立即触发，元素将重新出现。这将导致光标移动时闪烁。这显然不是你想要的。您应该改变不透明度，而不是完全隐藏元素

您应该正确地获取目标元素：请参阅。

工作得非常好。不，它不是。第二个图像正在闪烁，最后两个图像隐藏后不会显示。@Riateche，仔细查看代码。只有第二个图像有
show（）/hide（）
，因此它会闪烁。第一个图像只有
show（）
，最后两个图像只有
hide（）
。它工作得非常好。是的，我怎么才能摆脱眨眼呢？@Jashwant，我明白了，但这不是预期的，我几乎不能称之为“完美工作”。工作得很完美不，不是。第二个图像正在闪烁，最后两个图像隐藏后不会显示。@Riateche，仔细查看代码。只有第二个图像有
show（）/hide（）
，因此它会闪烁。第一个图像只有
show（）
，最后两个图像只有
hide（）
。它工作得非常好。是的，我该如何消除闪烁？@Jashwant，我明白了，但这不是预期的，我几乎不能称之为“完美工作”。但是当你隐藏一个元素时，它不会仍然占用页面空间吗？这就是为什么我没有选择显示：没有；这需要时间。但当您将鼠标移出此位置时，您正在背景元素上移动。所以，mouseover事件发生在后台元素上，mouseout事件发生在隐藏元素上，因为鼠标不再在它上面。但是当你隐藏一个元素时，它不会仍然占据页面上的空间吗？这就是为什么我没有选择显示：没有；这需要时间。但当您将鼠标移出此位置时，您正在背景元素上移动。所以，mouseover事件发生在背景元素上，mouseout事件发生在隐藏元素上，因为鼠标不再在其上。