javascript - jquery .css 脚本不工作

标签 javascript jquery html css

早上好, 我试图在鼠标悬停时显示一个 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>

在 css 文件中,我有一个 image_container id,其中属性显示设置为“无”;

最佳答案

如果你只想显示<div>在悬停时你不需要任何 JS你可以尝试这样的事情:

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

进一步解释:
由于您使用的是 display: none;在容器上,鼠标悬停不会生效,因为 <div>事件无法找到,因为它一开始就没有显示。

希望这对您有所帮助!

关于javascript - jquery .css 脚本不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44452203/

相关文章:

html - 如何在不使用 flex 盒的情况下将 "div"拉伸(stretch)到父级的完整高度?

java - ExtJs Combobox 显示字段编码

jQuery Tablesorter - 自定义解析器不起作用

html - 45 度 Angular + 方框阴影 - 仅使用 CSS

jquery - div 上下移动

javascript - 我需要使用 jquery 让一个对象向左浮动,同时在 div 内淡出

css - 使用 modernizer,我怎样才能为 css3 动画提供回退,回退到 flash?

javascript - 如何更改列表中单击某些元素的内容?

javascript - Barba.js (v2.9.7) 重新加载当前页面而不是下一页

javascript - ShadowBox 图像在 IE10 上消失