悬停在链接上时激活覆盖背景

Question

我正在为博客准备布局，需要制作幻灯片或多或少如下：

我已经可以通过 CSS 做很多事情了，但是我遇到了一个问题！图片仅在鼠标悬停在div 上时才会激活，但我需要在将鼠标悬停在图片链接上时激活图片，或者更好地进行着色。

有人可以帮我解决这个问题吗？

通过 BOOTPLY 获取我的代码

Bootply

我不知道我是通过 CSS 还是仅通过 JavaScript 执行此操作。我什至尝试通过 JavaScript 做更多事情，但对它了解不多。

Answer 1

您需要在图像和文本的父级上使用伪类:hover。当您将鼠标悬停在该元素的任何子元素上时，这将改变图像的不透明度。

改变这个

.img-box-feature:hover{opacity:1;}

到这里

[class*="box-"]:hover .img-box-feature{opacity:1;}

See updated Bootply

另外，我建议您将类从 box-um、box-dois 和 box-tres 更改为仅 box。然后您可以使用.box:nth-child() 或.box:nth-of-type() 来定位特定的。

Answer 2

如果你改变这一行：

.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');
})

Bootply

Answer 3

试试webkit filters

例如.img-box-feature2:hover{-webkit-filter: invert(100%);}

您还可以使用对比度 (%)、亮度（十进制）、模糊 (px) 或棕褐色 (%)

Answer 4

我还不清楚您是否希望图像在悬停在文本上时也处于活动状态，或者在悬停在文本上时仅处于活动状态。我还想知道您是否希望 所有 图像仅一个处于活动状态。

如果您希望所有图像在悬停文本时仅变为活动状态，您可以将文本元素移动为.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;}