0

试图在鼠标悬停时显示第一个 div 但隐藏第二个，然后在悬停时显示第二个 div 但隐藏第一个。抱歉，我是一个不擅长 javascript 的菜鸟。谁能帮我解决这个问题，我将不胜感激。似乎我已经遗漏了一些代码，因为我不知道如何应用它，比如 onmouseover 和 onmouseout 如果你能解释你的答案也会很棒..

<!DOCTYPE html> 
<html>
<body>
<div id="placeholder" onMouseOver="document.getElementById('blink').style.display = 'block';" onmouseout="document.getElementById('blink').style.display = 'none';">
 <div id="show">
## Heading ##
 </div>
 <div id="blink">
 <p> some text </p>
 </div>
 </div>
</html>
</body>

 css
  #placement{display:block;}
 #show{display:block;}
 .blink{
  position:relative;
 left:100px;
 width:450px;
height:515px;
background:#000;
padding:15px;
color:white;

}
 #blink:hover #blink{
display:block;
visibility:visible;
}

  .hide_show{
position:absolute;
left:15px;
right:15px;
padding:0;
margin:0;
text-align:left;}
4

2 回答 2

0

好吧，你猜你想要的是默认显示标题行，当鼠标悬停时，隐藏的文本会显示出来？尝试以下操作：（基本上您首先需要将#blink div设置为不可见。占位符的ID名称也不正确（不是放置）

<!DOCTYPE html> 
<html>

<style>
#placeholder{display:block;}
 #show{display:block;}
 .blink{
  position:relative;
 left:100px;
 width:450px;
height:515px;
background:#000;
padding:15px;
color:white;
display:none;
}
 #blink:hover #blink{
display:block;
visibility:visible;
}
  .hide_show{
position:absolute;
left:15px;
right:15px;
padding:0;
margin:0;
text-align:left;}
</style>
        <body>
        <div id="placeholder" onMouseOver="document.getElementById('blink').style.display = 'block';" onmouseout="document.getElementById('blink').style.display = 'none';">
         <div id="show">## Heading ##</div>
         <div id="blink"><p> some text </p></div>
        </div>
        </html>
    </body>
于 2013-10-05T02:42:15.877 回答
0

我现在可以帮助你的问题只是让我更好地理解你的问题，当有人将鼠标悬停在 div 上时。显示你想要那个 div 如何和 .blink 隐藏？然后当有人将鼠标悬停在 .blink 上时，你希望它显示和隐藏 .show？

于 2013-10-05T02:44:44.910 回答