분할 이미지에서 마우스를 가져 가기 어려움

Question

왼쪽 패널과 오른쪽 패널을 사용하여 가운데로 분할 된 이미지가 있습니다. 각면에는 고유 링크가 있으며 자체 마우스를 움직입니다.

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 체인을 위로 이동할 수 있습니까?

감사합니다.

Answer 1

이 문제는 제목이 2 개의 링크 위에 놓여 있기 때문에 발생합니다.

옵션 1 : 나는이 문제를 해결하는 두 가지 옵션을 보려면 제목 당신에게 pointer-events: none를 추가

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

이의 단점은 가난한 IE의 지원이다 : 그것은 비록 작동합니다 어떤 하강 브라우저에서 http://caniuse.com/#feat=pointer-events
: http://jsfiddle.net/hdky0s86/2/

옵션 2 : 링크 아래에 제목을 이동

가장 쉬운 방법은 이미 절대 위치를 지정하고 있기 때문에 z- 인덱스를 사용하는 것입니다. 당신의 .jumbo-hover 한 당신의 .jumbo-title에서 Z- 인덱스를 제거하고 추가

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

이것은 모든 브라우저에서 잘 작동합니다 (이 1000이 될 수 있도록하고 필요 없음, 1 할 것입니다)하지만 '호버 '색상이 제목 상단에 표시되며 바람직하지 않을 수 있습니다. 그것은 당신의 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/

Answer 2

당신은 항상 당신의 친구 jQuery를의 도움을받을 수 있습니다 .

$(".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; 
}