在分割圖像上難以懸停

我有一個圖像，它被分割成中間，左側窗格和右側窗格。每一方都有獨特的鏈接，並且它自己懸停。在分割圖像上難以懸停

HTML

<div class="jumbotron" style="position: relative;"> 
    <div> 
     <div class="jumbo-title"> 
      <p runat="server">Title</p> 
     </div>    
     <a id="leftPane" class="jumbo-hover" runat="server" target="_blank"> 
      <div> 
       <p>Summary</p> 
      </div> 
     </a> 
     <a id="rightPane" class="jumbo-hover" runat="server" target="_blank"> 
      <div> 
       <p>Full Report</p> 
      </div> 
     </a> 
     <img src="/assets/home.jpg" /> 
    </div> 
</div>

CSS

.jumbo-hover { 
    height: 100%; 
    width: 50%; 
    position: absolute; 
    top: 0; 
} 

#MainContent_rightPane { 
    right:0; 
} 

#MainContent_leftPane { 
    left: 0; 
} 

.jumbo-hover:hover { 
    background-color: rgba(16, 89, 121, 0.48); 
} 
.jumbo-hover:hover div p { 
    color: #cbf305; 
} 
.jumbotron p 
{ 
    line-height:1.15em 
} 
.jumbotron a 
{ 
    text-decoration:none; 
} 
.jumbo-title 
{ 
    position:absolute; 
    color:white; 
    width:500px; 
    text-align:center; 
    font-size:40px; 
    font-family:Montserrat, sans-serif; 
    text-transform:uppercase; 
    z-index:1000; 
    margin-top:20%; 
    margin-left:30%; 
    text-shadow: 1px 4px 5px rgba(150, 150, 150, 1); 
    font-weight:bold;    
} 
#MainContent_leftPane div 
{ 
    width:30%; 
    height:20%; 
    margin-top:69%; 
    margin-left:64%; 
    color:white; 
    font-family:'Playfair Display'; 
    font-size:32px; 
    text-align:right; 
    font-style:italic; 
    line-height:0.9em; 
} 
#MainContent_rightPane div 
{ 
    width: 30%; 
    height: 20%; 
    margin-top: 69%; 
    margin-left: 6%; 
    color:white; 
    font-family:'Playfair Display'; 
    font-size:32px; 
    text-align:left; 
    font-style:italic; 
    line-height:0.9em;  
}

我的問題是隻有當我將鼠標懸停在.jumbo標題，我分別失去了正確的高亮或左窗格中。如何在懸停的同時向上移動CSS鏈並突出顯示圖像的正確一面？

非常感謝！

來源

2014-11-24 BP85

看起來像一些相關的代碼缺失http://jsfiddle.net/hdky0s86/一個工作示例將是有用的！ – Pevara 2014-11-24 22:44:40

[截圖]（http://i.imgur.com/VH1DfSZ。jpg） – BP85 2014-11-24 22:45:47

它看起來像標題應該在你的錨下面，但正如我所說的，請提供一個小提琴或一些能夠再現你目前爲止所做的事情（你的css中的id似乎不適合初學者的HTML）。 – Pevara 2014-11-24 22:48:31

問題是由於您的標題放在您的2個鏈接之上。我看到兩個選項來解決這個問題：

選項1：添加pointer-events: none你標題

.jumbo-title { pointer-events: none; }

的這個缺點是在IE瀏覽器的支持比較差：http://caniuse.com/#feat=pointer-events
任何後裔瀏覽器，它會工作雖然：http://jsfiddle.net/hdky0s86/2/

選項2：將您的標題您的聯繫下

最簡單的方法是使用z-index，因爲你已經定位了絕對位置。只是從你的.jumbo-title刪除的z-index，並添加一個到您的.jumbo-hover（沒有必要爲它是1000，1都行）

http://jsfiddle.net/hdky0s86/3/

這應該在任何瀏覽器中正常工作，但你的「懸停'顏色將在你的標題上，這可能是不可取的。

作爲一個方面說明，我中有你超過複雜事物的感覺，尤其是當它涉及到你的HTML。看看我設置的例子，但這基本上是與你使用的代碼的一小部分一樣...

<div class='split-image-wrapper'> 
    <h1>title</h1> 
    <a class='left'>summary</a> 
    <a class='right'>full report</a> 
</div>

http://jsfiddle.net/hdky0s86/4/

來源

2014-11-24 23:12:51 Pevara

這是有幫助的。謝謝 – BP85 2014-11-24 23:22:49

您的編輯是否與非靜態圖像一起工作？我使用的圖像路徑是動態的。 – BP85 2014-11-24 23:36:15

當然，只需將它作爲div的style屬性添加到您的css文件中即可。 – Pevara 2014-11-24 23:37:40

你可以隨時從你的朋友的jQuery一點幫助。如果你對你的標題添加一個偵聽器來監視懸停，然後切換類hovered您#rightPane當標題徘徊，你可以保持懸停風格上：

$(".jumbo-title").hover(
    function(){ 
     $("#rightPane").toggleClass("hovered"); 
    } 
);

CSS：

.jumbo-hover:hover, .hovered { 
    background-color: rgba(16, 89, 121, 0.48); 
} 
.jumbo-hover:hover div p, .hovered div p { 
    color: #cbf305; 
}

來源

2014-11-24 23:30:42

在分割圖像上難以懸停

回答

相關問題