本文介绍了为什么我的 img hover 不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我正在尝试设置为 opacity: .04;，当悬停在 opacity:1; 上时，我的 img 悬停不是运作.我不确定这是为什么.有人可以帮助我了解我的问题出在哪里吗?
我的html:
.container2 {边距:0px；填充:0px；}.介绍 {宽度:100%；位置:相对；溢出:隐藏；边距:0；填充顶部:0；}.pic1 {位置:绝对；顶部:0；宽度:100%；高度:100%；}.intro-img {显示:块；边距:0 自动；最小宽度:100%；不透明度:0.4；}.pic1 img:悬停{不透明度:1；}.wrapper {高度:200px；最小高度:200px；位置:相对；填充底部:0；}.蓝色 {背景:#22428e；颜色:#fff;}.绿色 {背景:#de0e00；颜色:#fff;}#颜色内容{高度:200px；-moz-box-sizing:边框框；-webkit-box-sizing:边框框；box-sizing:边框框；宽度:330px；填充:0 25px；左边距:3em；}h1 {文本转换:大写；字体:700 32px/35px'Gotham SSm A', 'Gotham SSm B', Arial, Helvetica, sans-serif;边距:0 0 34px；填充顶部:28px；}p {边距顶部:-10px；}一个 {文字装饰:无；白颜色;}一:悬停{颜色:黑色;}@media screen and (max-width: 454px) {.wrapper {最小高度:100px；位置:相对；}#颜色内容{高度:200px；-moz-box-sizing:边框框；-webkit-box-sizing:边框框；box-sizing:边框框；宽度:100%；填充:0 25px；左边距:-4px；}#pic1 {显示:无；}}<div class="container2"><div 类="介绍"><div 类="pic1"><img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png"></div><!-- 结束 pic1 --><div 类="包装器"><文章类="蓝色" id="颜色-内容"><a href=""><h1>性别Spectrum.com </h1></a><p>我走了，所以我走了这么久哈哈哈哈，我是不是该去他妈的它啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊是啊</div></文章><!-- 文章结束--></div><!-- 结束包装器--></div><!-- 结束介绍--></div><!-- 容器 2 结束 --> 解决方案
你的 .wrapper 元素覆盖你的图像.这就是为什么鼠标事件不会在其后面的元素上触发的原因.
我给了 .wrapper { margin-top: 200px;} 所以你会看到它一旦被修复就可以工作了.
.container2 {边距:0；填充:0；}.介绍 {宽度:100%；位置:相对；溢出:隐藏；边距:0；填充顶部:0；}.pic1 {位置:绝对；顶部:0；宽度:100%；高度:100%；}.intro-img {显示:块；边距:0 自动；最小宽度:100%；不透明度:0.4；}.pic1 img:悬停{不透明度:1；}.wrapper {高度:200px；最小高度:200px；位置:相对；填充底部:0；边距顶部:200px；}.蓝色 {背景:#22428e；颜色:#fff;}.绿色 {背景:#de0e00；颜色:#fff;}#颜色内容{高度:200px；-moz-box-sizing:边框框；-webkit-box-sizing:边框框；box-sizing:边框框；宽度:330px；填充:0 25px；左边距:3em；}h1 {文本转换:大写；字体:700 32px/35px'Gotham SSm A', 'Gotham SSm B', Arial, Helvetica, sans-serif;边距:0 0 34px；填充顶部:28px；}p {边距顶部:-10px；}一个 {文字装饰:无；白颜色;}一:悬停{颜色:黑色;}@media screen and (max-width: 454px) {.wrapper {最小高度:100px；位置:相对；}#颜色内容{高度:200px；-moz-box-sizing:边框框；-webkit-box-sizing:边框框；box-sizing:边框框；宽度:100%；填充:0 25px；左边距:-4px；}#pic1 {显示:无；}}<div class="container2"><div 类="介绍"><div 类="pic1"><img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png"></div><!-- 结束 pic1 --><div 类="包装器"><文章类="蓝色" id="颜色-内容"><a href=""><h1>性别Spectrum.com </h1></a><p>我走了，所以我走了这么久哈哈哈哈，我是不是该去他妈的它啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊是啊</div></文章><!-- 文章结束--></div><!-- 结束包装器--></div><!-- 结束介绍--></div><!-- 容器 2 结束 -->I am trying to get to be set to an opacity: .04;, and when hovered over to be opacity:1; however, my img hover is not functioning. I am unsure of why this is. Can someone help me understand where my problem is?
my html:
.container2 {
margin: 0px;
padding: 0px;
}
.intro {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 0;
}
.pic1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.intro-img {
display: block;
margin: 0 auto;
min-width: 100%;
opacity: 0.4;
}
.pic1 img:hover {
opacity: 1;
}
.wrapper {
height: 200px;
min-height: 200px;
position: relative;
padding-bottom: 0;
}
.blue {
background: #22428e;
color: #fff;
}
.green {
background: #de0e00;
color: #fff;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 330px;
padding: 0 25px;
margin-left: 3em;
}
h1 {
text-transform: uppercase;
font: 700 32px/35px'Gotham SSm A', 'Gotham SSm B', Arial, Helvetica, sans-serif;
margin: 0 0 34px;
padding-top: 28px;
}
p {
margin-top: -10px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
@media screen and (max-width: 454px) {
.wrapper {
min-height: 100px;
position: relative;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 0 25px;
margin-left: -4px;
}
#pic1 {
display: none;
}
}
<div class="container2">
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
</div>
<!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
<div>
<a href="">
<h1> Gender
Spectrum.com </h1>
</a>
<p>I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article>
<!-- End of article -->
</div>
<!-- End wrapper -->
</div>
<!-- End intro -->
</div>
<! -- End of container2 -->
解决方案
Your .wrapper element is covering your image. This why mouse events do not trigger on the elements behind it.
I gave .wrapper { margin-top: 200px; } so you see it works as soon as that is fixed.
.container2 {
margin: 0;
padding: 0;
}
.intro {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 0;
}
.pic1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.intro-img {
display: block;
margin: 0 auto;
min-width: 100%;
opacity: 0.4;
}
.pic1 img:hover {
opacity: 1;
}
.wrapper {
height: 200px;
min-height: 200px;
position: relative;
padding-bottom: 0;
margin-top: 200px;
}
.blue {
background: #22428e;
color: #fff;
}
.green {
background: #de0e00;
color: #fff;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 330px;
padding: 0 25px;
margin-left: 3em;
}
h1 {
text-transform: uppercase;
font: 700 32px/35px'Gotham SSm A', 'Gotham SSm B', Arial, Helvetica, sans-serif;
margin: 0 0 34px;
padding-top: 28px;
}
p {
margin-top: -10px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
@media screen and (max-width: 454px) {
.wrapper {
min-height: 100px;
position: relative;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 0 25px;
margin-left: -4px;
}
#pic1 {
display: none;
}
}
<div class="container2">
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
</div>
<!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
<div>
<a href="">
<h1> Gender
Spectrum.com </h1>
</a>
<p>I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article>
<!-- End of article -->
</div>
<!-- End wrapper -->
</div>
<!-- End intro -->
</div>
<! -- End of container2 -->
这篇关于为什么我的 img hover 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
相关推荐
主页面上显示了一个合计，在删除和增加的时候需要更改这个总套数的值： //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后，...
2024-11-14
前端开发问题
156
1. 如果是ajax嵌套了 页面， 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09
前端开发问题
313
问题描述 我想改变layui时间日历布局大小，这个要怎么操作呢？ 解决办法 可以用css样式对时间日历进行重新布局，具体代码如下： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24
前端开发问题
271
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 语法： $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18
前端开发问题
125
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20
前端开发问题
5
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内，以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
2024-04-20
前端开发问题
6
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)