Удалить переполняемую область с кликом

Question

У меня есть навигационная панель с определенной высотой и логотипом, который переполняется. Этот логотип, конечно, доступен для кликов, но это означает, что часть, которая переполняется, также доступна для кликов.

Возможно ли переполнение логотипа, но не область с кликами?

HTML

<nav> 
    <a href="#"> 
    <div class="logo"> 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
    </div> 
    </a> 
</nav> 

CSS

body, html { 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 100px; 
    background: blue; 
    position: relative; 
} 

.logo { 
    position: absolute; 
    top: -36px; 
    left: -39px; 
} 

JSFIDDLE

Answer 1

Что-то вроде этого?

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    top: -36px; 
 
    left: -39px; 
 
    pointer-events: none; 
 
}

<nav> 
 
    <a href="#"> 
 
    <div class="logo"> 
 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
 
    </div> 
 
    </a> 
 
</nav>

Answer 2

Просто переместите логотип за пределами вашей ссылке и поставить эту ссылку на остальной части заголовка:

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav { 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 
.logo { 
 
    position: absolute; 
 
    top: -36px; 
 
    left: -39px; 
 
} 
 
a { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 10; 
 
    display: inline-block; 
 
}

<nav> 
 
    <a href="#"> 
 
    </a> 
 

 
    <div class="logo"> 
 
    <img src="http://i.imgur.com/h4bUdrZ.png" /> 
 
    </div> 
 
</nav>

Answer 3

Не кладите все div внутри a.

Поместите ссылку после изображения, придайте ей абсолютное позиционирование и тщательно установите положение и размер.

Другие ответы делают весь заголовок кликабельным. Если это нежелательно, используйте это решение. Возможно, вам придется настроить ширину области, на которую можно щелкнуть.

Смотрите пример ниже:

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    height: 100px; 
 
    background: blue; 
 
    position: relative; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    top: -36px; 
 
    left: -39px; 
 
} 
 

 
a.clickable-logo { 
 
    position: absolute; 
 
    display: inline-block; 
 
    left: 36px; 
 
    top: 36px; 
 
    width: 600px; 
 
    height: 100px; 
 
}

<nav> 
 
    <div class="logo"> 
 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
 
     <a href="#" class="clickable-logo"> 
 
     </a> 
 
    </div> 
 
</nav>

Answer 4

Изменить немного структурировать.

Оставьте <a> независимым и передайте ссылку в нем со следующим css.

HTML

<nav> 
    <a href="#"></a> 
    <div class="logo"> 
     <img src="http://i.imgur.com/h4bUdrZ.png" /> 
    </div> 
</nav> 

CSS

body, html { 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 100px; 
    background: blue; 
    position: relative; 
} 
nav a{ 
    position: relative; 
    display: block; 
    height: 100%; 
    z-index: 1; 
} 

.logo { 
    position: absolute; 
    top: -36px; 
    left: -39px; 
} 

Пример: https://jsfiddle.net/67s4ajqf/3/

Answer 5

А что-то вроде этого?

HTML

<a href="#"> 
    <div class="clear"> 
</div> 
</a> 
<nav> 
    <div class="logo"> 
    <img src="http://i.imgur.com/h4bUdrZ.png" /> 
    </div> 
</nav> 

CSS

body, html { 
    padding: 0; 
    margin: 0; 
} 

nav { 
    height: 100px; 
    background: blue; 
    position: relative; 
} 
.clear { 
    height: 100px; 
    background: 0; 
    position: absolute; 
    width: 100%; 
    z-index: 2; 
} 

.logo { 
    position: absolute; 
    top: -36px; 
    left: -39px; 
}