Css 使div仅出现在鼠标上方_Css

Css 使div仅出现在鼠标上方

css

Css 使div仅出现在鼠标上方,css,Css,我在一个相当简单的网站上工作，但我确实想要一个只出现在鼠标上方的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

我在一个相当简单的网站上工作，但我确实想要一个只出现在鼠标上方的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;
}

有没有办法解释为什么这不起作用？

您不能将鼠标悬停在不可见的元素上。它不是用来接收悬停事件的，而且它不会占用文档中的任何空间

如果您希望这样做，您需要使用保留空间的父级

，并使用

parent\u div:hover child\u div{display:block}

来显示隐藏的div。

display:none防止元素出现在布局中。在那里放置悬停的东西，当它被隐藏时，它将取代它的位置（或者只使用可见性：hidden；
）
可以将div放置在容器div中，容器div将生成如下悬停函数：
.container:hover > .mydiv {
    display: block;
}

在可见性上展开：隐藏-这样做仍然会占用空间，但由于它的位置是绝对的，因此您不必担心其他元素会因此移动。
当您使用显示：无
时，div根本不会显示在页面上。因此，您不能将鼠标悬停在它上以触发：hover
css
尝试使用visibility:hidden
和visibility:visible
。这样，div将作为一个不可见元素保留在页面上，当您将鼠标悬停在其在页面上的位置上时，它将可见。
您可以非常简单地执行此操作，当您希望它不可见时，将不透明度设置为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;
}

如果div
不可见，则它不会接收事件。怎么可能呢？如果它确实具有display:none
属性，那么用户将在何处悬停以使其可见？你需要一个事件目标
您可以做的一件事是有一个悬停在其上的目标元素，以及一个子元素div
，该子元素显示在悬停状态
例如：
HTML
这里重要的是#master
div
被悬停，悬停#master
的子对象的#popup
规则可见。
您将需要两个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>


可以悬停的东西。
在有人悬停在“DivToRespondeToMouseHover”上之前，我一直隐藏着
$（文档）.ready（函数（）{
//当文档加载正确时。将悬停事件处理程序附加到
$（“#divtoresponptomousehave”）.hover（函数（）{
$（“.mydiv”）.show（）；//使用标准的jQuery show
});
});

正常添加您的样式和内容。

为什么会发生这种情况：
但未显示的内容本身无法响应用户事件。因为元素不是真的，所以没有悬停的东西。在它变得可见之前，它可能不会触发事件
任何使用Jquery的人都可以使用它（如果您还没有使用它的话）。首先需要让div可见，才能触发mouseover/hover事件。考虑使用JavaScript（jQuery可以很好地）来隐藏外部DIV中包含的固定大小的元素。
$('#parentDiv').hover(function(){
    $('#childDiv').show();
});

是的，您即将使用css。您必须首先找到选择器，这意味着我必须使用哪个选择器。好的，这意味着如果我将鼠标悬停在body标记上，那么所有内容都将显示出来。
下面的代码使用并试着理解！
保证金自动
mydiv先生{
文本对齐：居中；
字体大小：30px；
颜色：#ffff00；
位置：绝对位置；
宽度：680px；
高度：180像素；
z指数：15；
保证金：0px自动；
背景：#FF0000；
显示：无；
}
#hover me:hover.mydiv{
显示：块；
}
盘旋我
内容在这里！
如果您的div为display:none，则事件悬停不起如果您的div为display:none，则没有悬停的内容。您不能将光标悬停在隐藏的div上，您必须将光标悬停在其他内容上才能显示该div。
        <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>

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

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>