Javascript css脚本不'；行不通_Javascript_Jquery_Html_Css

Javascript css脚本不'；行不通

javascript jquery html css

Javascript css脚本不'；行不通,javascript,jquery,html,css,Javascript,Jquery,Html,Css,早上好，我想在MouseOver上显示一个div。我创建了一个函数，但我不知道出了什么问题。你能帮帮我吗 HTML代码： <!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title> PHOTOGALLERY</title> <link rel="stylesheet" href="style.css" type=

早上好，我想在MouseOver上显示一个div。我创建了一个函数，但我不知道出了什么问题。你能帮帮我吗

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>


照片库
函数show\u img\u container（）{
$（“#图像_容器”）.css（“显示”、“块”）；
}

在css文件中，我有一个image_容器id，其中属性display设置为“none”

如果div的显示设置为“无”，则不能将其悬停在div上

如果您只想在悬停状态下显示

，则不需要任何

JS

，您可以尝试以下操作：

div{
显示：无；
}
a:悬停+俯冲{
显示：块；
}

悬停在我身上！
悬停显示的内容

在css文件中，我有一个image_容器id，其中属性display设置为“none”

无法悬停未被阻止的元素

可以使用“不透明度”属性隐藏div

div{
不透明度：0；
}
div:悬停{
不透明度：1；
}

悬停显示的内容

我将根据OP提供的内容回答。用包含函数的

div

包装

#image_容器，然后它应该可以工作
由于悬停时有些东西出现了，但悬停出来后却没有消失，这很奇怪，因此我为onmouseout添加了另一个函数onmouseout


函数show\u img\u container（）{
$（“#图像_容器”）.css（“显示”、“块”）；
}
函数hide_img_container（）{
$（“图像容器”）.css（“显示”、“无”）；
}
#图像_容器{
显示：无；
}

让我停下来！！
我是隐藏的！！！
好的。我知道问题所在。在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;
}

如果删除“过渡”属性，它将起作用：`
你能告诉我为什么吗？
我很好奇，是否可以悬停显示为“无”的元素？附加CSS代码比描述您在其中编写的内容更好。代码验证也可以。@新手如何悬停显示为“无”的元素？您正在触发未显示的元素上的函数。它应该是一条注释。这是正确的为什么我投了反对票。但似乎其他人（几乎）都认为这值得一试answer@MihaiT，我认为这是值得的answer@Satpal答案应该给出解决方案。我认为这是评论产生的原因之一。对于这样的“答案”。但不管怎样，我尊重别人的意见。对不起，我是新手。。谢谢你纠正我。试试transstion:opacity 0.3s ease in out 2s