懸停 - >標題文字 - >干擾懸停效果

Question

我正在組建一個響應式圖庫。具有以下功能：

• 開始狀態：圖像在右下角有一個簡短標題。
• 鼠標懸停在圖片：顯示一個顏色疊加和更長的字幕顯示在圖像的左上角

問題：

當你將鼠標懸停在圖片，它一切正常，直到你的鼠標懸停在較長的標題文本中，這會打破顏色疊加效果（這隻發生在鼠標懸停在文本上時）。

HTML

<div class="container"> 

<div class="row "> 
    <ul> 

     <li class="col-md-8 image"> 
      <div class="hoverbox1"> 
      <img class="img-responsive" src="http://i.imgur.com/6OHsbi1.jpg" width="940px" height="627px" /> 
      </div> 
      <div class="desc1"> 
      <h2 class="h2Alone1">Description here</h2> 
      </div> 
      <div class="desc1b" style="display:none;"> 
      <p class="article1">Description here<br />Some caption text here explaining what this photo is about. How nice this and so on. Some caption text here explaining what this photo is about. How nice this and so on.</p> 
      </div> 
     </li> 
    </ul> 
    </div> 

CSS

h2 { 
    font-size: 17px !important; 
    } 

ul { 
    list-style-type: none; 
    } 

img { 
    padding-bottom: 20px; 
    } 

.desc1 { 
    background-color: #000; 
    /*bottom: 0;*/ 
    color: #fff; 
    right: 0; 
    margin-right:15px; 
    opacity: 0.5; 
    position: absolute; 
    width: 80%; 
    padding: 0px; 
    margin-top:-72px; 
    z-index: 100; 
    } 

    .desc1b { 
     color: #fff; 
     right: 0; 
     left:0px; 
     opacity: 0.5; 
     position: absolute; 
     width: 80%; 
     padding-top: 10px; 
     padding-left: 30px; 
     top:0px; 
     z-index: 100; 
    } 

.desc1 h2 { 
    padding-left: 10px; 
    } 

.image { 
    width:100%; 
    padding:0px; 
    } 

.hoverbox1 { 
    position:relative; 
    /*display:inline-block;*/ 
    } 

.hoverbox1:hover:after { 
    content:"\A"; 
    width:99.9%; 
    height:96%; 
    background:rgba(65, 105, 225, 0.5); 
    position:absolute; 
    top:0; 
    left:0; 
    } 

jQuery的

$('.hoverbox1').on('mouseenter', function() { 
    $(".desc1b").show(); 
    $(".desc1").hide(); 
}).on('mouseleave', function(){ 
    $(".desc1").show(); 
    $(".desc1b").hide(); 
}); 

Working Example

我想懸停效果保持有效即使鼠標懸停在所顯示的圖像的左上角的長標題文字。

Answer 1

你只需要添加pointer-events:none的CSS規則包含文本

這裏div的一個updated jsfiddle

我要指出的是pointer-events不被舊版本的Internet Explorer支持，但this answer提到了一個明顯解決問題的黑客攻擊。

作爲替代，這裏的你如何能做到同樣的事情，而不pointer-events規則（甚至JQuery的對這個問題）的例子：

.bg { 
 
    width:500px; 
 
    height:150px; 
 
    background-color:#666; 
 
    position:relative; 
 
} 
 
.hover { 
 
    display:block; 
 
    position:absolute; 
 
    opacity:0; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:rgba(0,50,100,0.75); 
 
    transition:opacity 0.3s; 
 
} 
 
.hover-text { 
 
    color:#fff; 
 
    padding:1em 2em; 
 
} 
 
.note { 
 
    color:#aaa; 
 
    font-size:3em; 
 
    padding:0.2em 0.4em; 
 
} 
 
.bg:hover .hover { 
 
    opacity:1; 
 
}

<div class="bg"> 
 
    <div class="hover"> 
 
    <p class="hover-text">This hover effect can be achieved using basic CSS. 
 
     You don't need to use JQuery or <code>pointer-events</code> rules.</p> 
 
    </div> 
 
    <p class="note">Move the mouse over this rectangle.</p> 
 
</div>