Сложный наклон на раздельном изображении

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

Проблема связана с тем, что ваш заголовок лежит поверх двух ссылок. Я вижу два варианта решения этого:

вариант 1: добавить pointer-events: none вам название

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

Недостатком этого является слабая поддержка в IE: http://caniuse.com/#feat=pointer-events
в любом спускаемого браузере он будет работать, хотя : http://jsfiddle.net/hdky0s86/2/

вариант 2: переместить заголовок под ваши ссылки

Самый простой способ для этого, вероятно, работать с z-index, поскольку вы уже позиционируете абсолютный. просто удалить Z-индекс от вашего .jumbo-title и добавьте к вашему .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/

Answer 2

Вы всегда можете получить небольшую помощь от вашего друга 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; 
}