在CSS中設置類或將鼠標懸停在2個重疊的div上

Question

是否可以給懸停圖標一個類，以便該圖標是triggerinfo？當我將它懸停時，圖像變成灰色，它變成了彩色，但我不想在着色時懸停文字，當我檢查小圖標時。有沒有一種方法在圖像上重疊div與triggerinfo類，但不會離開圖像的懸停。就像懸停不可見的div並且不使懸停效果變成彩色？

謝謝！

如果有幫助，我可以分享鏈接到我的網站，但只作爲消息不公開發布。它變得更加直觀，我更好地理解我的意思。

jQuery(document).ready(function() { 
 
    jQuery(".triggerinfo").mouseleave(function() { 
 
    jQuery(this).next(".info").hide(); 
 
    }); 
 
    jQuery(".triggerinfo").hover(function() { 
 
    jQuery(this).next(".info").toggle("fade"); 
 
    }); 
 
});

.info { 
 
    display: none; 
 
    padding: 10px; 
 
    background: #fff; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    z-index: 1; 
 
} 
 
.triggerinfo { 
 
    display: inline-felx; 
 
    opacity: 0.1; 
 
    position: absolute; 
 
    margin-top: -50px; 
 
    margin-left: 30px; 
 
    z-index: 3; 
 
} 
 
.uk-overlay-icon:before { 
 
    content: "\f0c9"; 
 
    position: absolute; 
 
    top: 90%; 
 
    left: 10%; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin-top: -15px; 
 
    margin-left: -15px; 
 
    font-size: 30px; 
 
    line-height: 1; 
 
    font-family: FontAwesome; 
 
    text-align: center; 
 
    color: #f69c00; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;"> 
 
    <div class="uk-panel"> 
 
     <div class="uk-panel-teaser"> 
 
      <figure class="uk-overlay uk-overlay-hover "> 
 
       <img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg"> 
 
       <div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div> 
 
       <a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a> 
 
      </figure> 
 
     </div> 
 

 
     <div> 
 
      <div class="triggerinfo"> 
 
       sdf 
 
      </div> 
 
      <div class="info"> 
 
       <h5>dsfg</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

的Fiddlejsfiddle.net/e8qd8gvf/3/現在的作品，因爲它應該在我的網站。現在的事情是：在懸停img上色，它出現在左下角的一個小圖標，img下面的觸發器應該是這個小圖標，因爲圖標來自uk-overlay中的css定義，圖標（從字體真棒） 我現在不要如何設置這個圖標上的信息類。 或者我試圖把與信息類的div在圖標的位置，而不是觸發它，但比顏色effekt不顯示當我觸發它，所以我認爲必須有一種方法來觸發div在懸停和不失去彩色效果，所以觸發div會觸發Info和musst觸發從img同時懸停

PS：對不起，長的CSS！

Answer 2

的<figure>元件旨在標記圖解，說明，照片，代碼示例和類似的內容，「可以移動從文檔的主流動離開，不影響文檔的含義」（http://w3c.github.io/html-reference/figure.html）。
你的使用方式似乎違反了這個規範。

按照規範和最佳實踐進行編碼是您自己的責任。

---

我只是選擇了用你提供的示例：https://jsfiddle.net/e8qd8gvf/4/

我感動uk-overlay-icon外的身影，增加了撥動信息類，並把info盒子裏面。

所以，剩下的是加入一些CSS：

.uk-position-cover { cursor: default; } 
.uk-panel-teaser { position: relative; } 
.toggle-info { 
    display: none; 
    cursor: pointer; 
    position: absolute; bottom: 20px; left: 20px; 
    width: 30px; height: 30px; 
} 
.toggle-info > .info { 
    width: 150px; height: 150px; 
    border: 2px solid red; 
    position: absolute; bottom: -20px; left: 10px; 
    transform: translateY(100%); 
} 
.toggle-info, .info { display: inline-block !important; } 
.toggle-info.hidden, .info.hidden { display: none !important; } 

以及改變你的JS到：

jQuery(document).ready(function() { 
    jQuery(".uk-overlay").hover(
     function() { 
      jQuery(this).next(".toggle-info").removeClass("hidden"); 
     }, 
     function() { 
      jQuery(this).next(".toggle-info").addClass("hidden"); 
     } 
    ); 
    jQuery(".toggle-info").hover(
     function() { 
      jQuery(this) 
       .removeClass("hidden") 
       .children(".info").removeClass("hidden"); 
     }, 
     function() { 
      jQuery(this) 
       .addClass("hidden") 
       .children(".info").addClass("hidden"); 
     } 
    ); 
}); 

 
我的解決辦法是隻顯示你的方式完成的事情，迄今爲止不是「好」。你需要自己適應它並符合規格。