我正在为博客准备布局,需要或多或少地制作幻灯片,如下所示:
我已经能够通过CSS做很多事了,但我遇到了问题!图像仅在鼠标悬停在div
上时激活,但是当我将鼠标悬停在图像链接上时,我需要激活图像,或者更好地将图像着色。
有人可以帮我解决这个问题吗?
通过BOOTPLY
获取我的代码我不知道我是通过CSS还是仅通过JavaScript来做到这一点。我甚至尝试通过JavaScript做更多事情,但对此并不了解。
答案 0 :(得分:2)
您需要在图像和文本的父级上使用伪类:hover
。当您将鼠标悬停在该元素的任何子元素上时,这将改变图像的不透明度。
更改此
.img-box-feature:hover{opacity:1;}
到这个
[class*="box-"]:hover .img-box-feature{opacity:1;}
另外,我建议您将课程从box-um
,box-dois
和box-tres
更改为box
。然后,您可以使用.box:nth-child()
或.box:nth-of-type()
定位特定的目标。
答案 1 :(得分:1)
如果您更改此行:
.img-box-feature:hover {
opacity:1;
}
到此:
.img-box-feature:hover,
.img-box-feature.hover{
opacity:1;
}
您可以使用jQuery切换到新类:
$('.over-text-feature h1 a').on('mouseenter mouseleave', function(e) {
$(this).closest('[class^="col-"]').find('.img-box-feature').toggleClass('hover');
})
答案 2 :(得分:0)
e.g。 .img-box-feature2:悬停{-webkit-filter:invert(100%);}
您还可以使用对比度(%),亮度(十进制),模糊(px)或棕褐色(%)
答案 3 :(得分:0)
当我将图像悬停在文本上时,如果您希望图像激活 ,或者将鼠标悬停在文本上时仅,我仍然不清楚。我也想知道你是否希望所有图像只能一个。
如果您想要 all ,只有 的图像在悬停文本时才会变为活动状态,您可以将文本元素移动为.section-slider
的第一个子元素,并使用CSS兄弟选择器:~
。
像这样:
<section class="section-slider">
<div class="over-text-feature">
<h1><a href="#">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</a></h1>
<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 box-um">
<div class="img-box-feature" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')"></div>
</div>
<div class="col-md-6 box-dois">
<div class="img-box-feature2" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')"></div>
</div>
<div class="col-md-6 box-tres">
<div class="img-box-feature2" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="row">
<div class="col-md-3">01</div>
<div class="col-md-3">01</div>
<div class="col-md-3">01</div>
<div class="col-md-3">01</div>
</div>
</div>
</section>
/* SLIDER PRINCIPAL */
.section-slider{ background:#000; width: 100%;}
.img-box-feature{
width: 100%;
height: 0;
padding-bottom: 70% ; /* % of width, defines aspect ratio*/
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background:rgba(0,0,0,0.6);
opacity:0.3;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.img-box-feature2{
width: 100%;
height: 0;
padding-bottom: 35% ; /* % of width, defines aspect ratio*/
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background:rgba(0,0,0,0.6);
opacity:0.3;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.over-text-feature{ z-index:100;
position:absolute;
color:white;
display: inline-block;
vertical-align: middle;
bottom: 15px;
width: 95%;
left:10px;
border-left: 5px solid #fff;
padding-left: 10px;
}
.over-text-feature h1{ font-size: 1.8em;}
.over-text-feature h1 a{color: #00aeef;}
.section-slider .box-um{float: left; margin: 0px !important; padding: 0px !important;}
.section-slider .box-dois{float: right;margin: 0px !important; padding: 0px !important;}
.section-slider .box-tres{float: right; margin: 0px !important; padding: 0px !important;}
.over-text-feature:hover ~ .container .img-box-feature, .over-text-feature:hover ~ .container .img-box-feature2{opacity: 1;}