Абсолютно позиционированный элемент поверх ссылки

У меня есть HTML, который я не могу контролировать, но я смотрю, могу ли я стилизовать таким образом, чтобы достичь определенного результата. У меня есть ссылка, у которой есть ребенок со ссылкой. У меня есть заголовок, который является родным братом по ссылке, но он абсолютно расположен в середине ссылки. Когда ссылка зависнет, вы можете щелкнуть ее, однако, когда вы наводите курсор на элемент заголовка, вы не можете щелкнуть ссылку (поскольку она не является дочерним элементом <a>, а скорее является родным братом). Очевидно, если бы название было потомком <a>, у меня не было бы проблем.Абсолютно позиционированный элемент поверх ссылки

Есть ли какие-либо варианты для достижения моего желаемого результата? Как я уже сказал, HTML, который я разрабатываю, не может быть отредактирован. HTML и CSS ниже.

В конечном счете, я хотел бы, чтобы заголовок располагался над ссылкой, но все же позволял щелкнуть по всей ссылке, будь то зависание над заголовком или нет.

<div id="" class="grid-square"> 
    <a href="# class="widget_sp_image-image-link"> 
     <img width="1920" height="1080" class="attachment-full" style="max-width: 100%;" src="..."> 
    </a> 
    <div class="title"> 
     <p>TITLE</p> 
    </div> 
</div> 


.home-grid .grid-square, .home-grid .grid-rectangle-half { 
    background-color: #000; 
    display: block; 
    font-size: 100%; 
    margin-bottom: 30px; 
    overflow: hidden; 
    position: relative; 
} 

.home-grid img { 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

.home-grid .title { 
    color: #fff; 
    font-size: 4.8em; 
    font-weight: 600; 
    font-family: "proxima-nova-alt-condensed"; 
    left: 0; 
    margin-bottom: 0; 
    margin-top: 0; 
    position: absolute; 
    top: 50%; 
    text-align: center; 
    width: 100%; 
    z-index: 1; 
}

источник

2016-09-04 Michael Hamilton

Вы можете установить свойство pointer-events непревзойденных в классе заголовка, чтобы указать, что вы хотите, событие мыши, чтобы пройти через заголовок и целевую ссылку внизу.
В следующем фрагменте вы можете прокрутить страницу вниз и щелкнуть заголовок или изображение, чтобы вернуться к началу документа.

p { 
 
    margin: 0 ; 
 
} 
 
.grid-square { 
 
    position: relative ; 
 
    width: 300px ; 
 
    height: 800px ; 
 
    line-height: 800px; 
 
} 
 
.home-grid img { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.home-grid .title { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    color: #fff; 
 
    font-size: 4.8em; 
 
    font-weight: 600; 
 
    font-family: "proxima-nova-alt-condensed"; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    z-index: 1; 
 
}

<div class="home-grid"> 
 
    <div class="grid-square"> 
 
     <a href="#top" class="widget_sp_image-image-link"> 
 
      <img class="attachment-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"> 
 
     </a> 
 
     <div class="title"> 
 
      <p>TITLE</p> 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-09-04 23:29:33

Абсолютно позиционированный элемент поверх ссылки

ответ

Смежные вопросы