Question

我正在一个相当简单的网站上工作，但我想要的一件事就是只在鼠标悬停时出现的div。我使用了以下方法：

.mydiv {
    text-align: center;
    font-size: 150px;
    color: #ffff00;
    position: absolute;
    width: 680px;
    height: 180px;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -90px 0 0 -340px;
    background: black;
    display: none;
}

.mydiv:hover {
    display: block;
}

关于为什么这不起作用的任何想法？

Answer 1

display:none;可以防止您的元素出现在布局中。把东西放在那里，它会在隐藏时占据它的位置（或者只使用visibility:hidden;代替。）

您可以将div放在容器div中，该div将产生如下的悬停函数：

.container:hover > .mydiv {
    display: block;
}

扩展visibility:hidden; - 这样做仍然会占用空间，但由于它的位置是绝对的，所以你不必担心因其而移动的其他元素。

Answer 2

您不能将鼠标悬停在不可见元素上。它不在那里接收悬停事件，它将在文档中占用几乎没有空间。

如果您希望这样做，则需要使用保留空间的父<div>，并使用parent_div:hover child_div { display:block }来显示隐藏的div。

Answer 3

使用display: none时，div根本不显示在页面上。因此，您无法将鼠标悬停在其上以触发:hover css。

尝试使用visibility: hidden和visibility: visible。这样，div作为一个不可见的元素保留在页面上，当你将鼠标悬停在页面上的位置时，它将是可见的。

Answer 4

你可以通过将不透明度设置为0来实现它非常简单，然后在悬停时将其增加到1。

.mydiv {
    /* your code */
    opacity: 0;
}
.mydiv:hover {
    opacity: 1;
}

如果您希望它平滑，可以添加转换：

.mydiv {
    /* your code */
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.mydiv:hover {
    opacity: 1;
}

Answer 5

如果div不可见，则不会收到该事件。怎么样？如果它具有display: none属性，用户将在何处悬停以使其变为可见？ Yuo需要一个事件目标。

您可以做的一件事是拥有一个悬停在其上的目标元素，以及一个悬停时出现的子div。

例如：http://jsfiddle.net/frozenkoi/v37Tt/

HTML

<div id="master">
    hover for surprise!
    <div id="popup">
        Happy surprise party!
    </div>
</div>

CSS

#master {
    border: 1px solid black;
    background: pink;
    width: 150px;
}

#popup {
    border: 1px dotted red;
    background: yellow;
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
}

#master:hover #popup {
    display: block;
}

这里重要的是，#master div会悬停，并且可以看到悬停在#popup的{{1}}孩子的规则。

Answer 6

你需要两个Div。一个响应悬停事件和原始div。

我将使用jquery作为示例。

        <div id="DivToRespondToMouseHover">
        Something to be hoverable.
        </div>
        <div class="mydiv">
         I am hidden until someone hovers over "DivToRespondeToMouseHover"
        </div>

        <script>
        $(document).ready(function (){
          //When the document loads correct. Attach a hover event handler to 
          $("#DivToResponToMouseHover").hover(function(){
            $(".mydiv").show(); //Use the standard jQuery show
          });
        });
        </script>

正常添加你的风格和东西为什么会这样：但是未显示的内容无法自行响应用户事件。因为元素不是真的没有什么可以徘徊。在它变得可见之前，它可能不会触发事件。

任何使用Jquery它对这些东西真的很棒（如果你还没有使用它）。

Answer 7

您需要将div显示为能够首先触发鼠标悬停/悬停事件。考虑使用JavaScript（jQuery可以很好地执行此操作）来隐藏鼠标悬停时具有固定大小的外部div的包含元素。

$('#parentDiv').hover(function(){
    $('#childDiv').show();
});

Answer 8

Yes ,You are near about to css.You have to find out  at first the selector that means in which selector I have to use.Ok that means If I hover on body tag then all content will show.
Below the code use and try to understand!
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Margin Auto</title>
    <style>

.mydiv {
        text-align:center;
        font-size:30px;
        color: #ffff00;
        position:absolute;
        width:680px;
        height:180px;
        z-index:15;
        margin:0px auto;
        background:#FF0000;
        display:none;
    }
    #hoverme:hover .mydiv {
        display:block;
    }


    </style>

</head>
<body>
<div id="hoverme">
<p>Hover me</p>
<div class="mydiv">

   Content goes here!

</div>
</div>
</div>
</body>
</html>

只在divover上显示div

8 个答案: