懸停在鏈接

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

TR y out webkit filters

例如，您可以使用對比度（％），亮度（十進制），模糊（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;}