Question

上午，我试图显示一个div onmouseover。我创建了一个函数，但我不知道出了什么问题。你能帮我吗？

HTML代码：

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title> PHOTOGALLERY</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <link rel="stylesheet" href="css/smoothness/jquery-ui-
         1.9.2.custom.css"/>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
    </script>
    <script>
        function show_img_container() {
            $("#image_container").css("display", "block");
        }
    </script>
</head>
<body>
    <div id="div_container">
        <div id="div_image" class="cycle-slideshow">
            <img src="images/2.jpg" style="height:100%; width:100%">
            <img src="images/3.jpg" style="height:100%; width:100%">
            <img src="images/4.jpg" style="height:100%; width:100%">
            <img src="images/5.jpg" style="height:100%; width:100%">
        </div>
        <div id="image_container" onmouseover="show_img_container()"></div>
    </div>
</body>
</html>

在css文件中，我有一个image_container id，其中属性显示设置为＆＃39; none＆＃39;;

Answer 1

如果您只想在悬停时显示<div>，那么您不需要任何JS，您可以尝试这样做：

＆＃13;

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

＆＃13;

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

＆＃13;

进一步解释：
由于您在容器上使用display: none;，因此鼠标悬停不会生效，因为事件无法找到<div>，因为它没有显示在第一名。

希望这有帮助！

Answer 2

在css文件中，我有一个image_container id，其中属性显示设置为＆＃39; none＆＃39;;

无法悬停无阻挡元素。

您可以使用opacity属性隐藏div。

＆＃13;

div {
    opacity: 0;
}
    
div:hover {
    opacity: 1;
}

＆＃13;

<div>Stuff shown on hover</div>

＆＃13;

Answer 3

我将根据OP提供的内容进行回答。用#image_container包含该函数的div包装，然后它应该可以工作。

因为在悬停时出现但在徘徊后没有消失的事情很奇怪，我为onmouseout添加了另一个功能

＆＃13;

function show_img_container() {
  $("#image_container").css("display", "block");
}
function hide_img_container() {
  $("#image_container").css("display", "none");
}

＆＃13;

#image_container {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
  HOVER ME!!
  <div id="image_container">IM HIDDEN!!!</div>
</div>

＆＃13;

Answer 4

如果显示设置为无，则无法将鼠标悬停在div上。

Answer 5

确定。我知道这个问题。在css样式表中我有这个：

#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;

}

#image_container:hover {
opacity: 1;
}

如果我删除了它的转换属性：` 你能告诉我为什么吗？

jquery .css脚本不起作用

5 个答案: