Question

http://www.thinkstudio.co.za/Untitled-1.html

所有都在一个html文件中，使用css amd html。我尝试过使用z-index，它可以工作，但是当你将鼠标悬停在弹出框区域时，它会出现问题（请参阅上面的链接）这与div定位有关吗？我需要2个带有容器区域内容的div，一旦你将鼠标悬停在它上面，就需要有一个弹出窗口，如果还有其他更简单的方法，请帮忙！

Answer 1

这是你要找的吗？ https://jsfiddle.net/53LyLmy9/

我所做的是创建一个JQuery事件，只要鼠标进入弹出框或框，弹出窗口就会显示，当鼠标离开时，它会隐藏。

$('#box,#popup').mouseenter(function(){
  $('#popup').show(); 
});
$('#box,#popup').mouseleave(function(){
  $('#popup').hide();
});

Answer 2

问题是当你将鼠标悬停在.box上时，它会松散悬停在那个正在触发.box显示的链接上。修复了你的问题

   .box:hover {
     display:block;
    }

Answer 3

问题是当你将鼠标悬停在.box上时，它会松散悬停在那个正在触发.box显示的链接上。试试这个小提琴：https://jsfiddle.net/Jyde/2sodLq6y/

.box {
  display: none;
  position: absolute;
  background: #215273;
  width: 200px;
  height: 100px;
  float: left;
  color: white;
  margin-top: -30px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 90px;
  text-align: center;
  z-index:1;
}

.topdiv{
  height:250px;
  width:250px;
}   

.container{
  width:400px;
  height:600px;
  background-color:white;
  color:white;
  /*Important:*/
  position:absolute;
  z-index: 10;  
}

.left{
  width:200px;
  height:300px;
  background-color:#bda97f;
  float:left;
  position:absolute;   
 }

.link-spanner{
   position:absolute; 
   width:100%;
   height:100%;
   top:0;
   left: 0;
   z-index: 1;
}

a:hover + .box {
  display:block;   
}

.box:hover {
  display:block;
}

悬停时弹出一个div会出现在其他div的前面吗？

3 个答案: