jQuery .css脚本不起作用
[英]jquery .css script doesn't work
问题描述
Morning, I'm trying to display a div onmouseover. 
早上，我正在尝试显示div onmouseover。 I created a function but i don't know what is wrong. 我创建了一个函数，但我不知道出什么问题了。 Could you help me please. 请问你能帮帮我吗。
The HTML code: 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>
In the css file i have a image_container id where the attribute display is set to 'none'; 在css文件中，我有一个image_container id，其中属性显示设置为“ none”；
5 个解决方案
解决方案1
3 2017-06-09 07:55:43
If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this: 如果您只想在鼠标悬停时显示<div> ，则不需要任何JS ，可以尝试使用以下方法：
div { display: none; } a:hover + div { display: block; }
<a>Hover over me!</a> <div>Stuff shown on hover</div>
To explain further: 进一步说明：
Since you're using display: none; 由于您使用的是display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place. 在容器上，鼠标悬停不会生效，因为该事件未找到<div> ，因为该事件没有首先显示。
Hope this helps! 希望这可以帮助！
解决方案2
3 2017-06-09 07:56:46
In the css file i have a image_container id where the attribute display is set to 'none';
It is not possible to hover a none blocked element. 不能将鼠标悬停在没有阻塞的元素上。
You can use the opacity attribute to hide your div. 您可以使用opacity属性隐藏div。
div { opacity: 0; } div:hover { opacity: 1; }
<div>Stuff shown on hover</div>
解决方案3
3 2017-06-09 08:00:48
I'll answer based on what OP has provided. 我将根据OP提供的内容进行回答。 wrap the #image_container with a div that contains the function, then it should work. 用包含函数的div包裹#image_container ，然后它应该可以工作。
And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout 并且，由于将鼠标悬停时出现了某些东西但悬停后并没有消失，这很奇怪，因此我添加了另一个onmouseout功能
function show_img_container() { $("#image_container").css("display", "block"); } function hide_img_container() { $("#image_container").css("display", "none"); }
#image_container { display: none; }
<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>
解决方案4
2 2017-06-09 07:51:20
如果div的显示设置为none，则无法在div上悬停。
解决方案5
-1 2017-06-09 09:31:29
Ok. 好。 I know the problem. 我知道这个问题。 In the css stylesheet i had this: 在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;
}
If i delete the transition attribute it works:` Could you show me why? 如果删除过渡属性，它将起作用：`您能告诉我为什么吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.