в приведенной ниже скрипке у меня есть тег привязки с href и фоновым изображением в этой структуре, текст останавливает href, чтобы щелкнуть любую идею, как решить проблему с той же структурой HTML?
<div class = "banner-container">
<div class = "banner-box">
<div class = "banner-div">
<div class = "bannerheading">
<p><span>The correct link should be </span></p>
</div>
</div>
<a href = "https://www.google.com/">
<div class = "banner-img" style = "background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');">
</div>
</a>
</div>
пожалуйста, отметьте красную рамку внутри окошка не кликабельно https://jsfiddle.net/uqbhcdn6/1/.
любая идея будет оценена по достоинству :)
Одна из возможностей - дать .bannerheading
стиль pointer-events: none;
, хотя это сделает невозможным выбор текста в .bannerheading
:
.banner-container {
min-height: 300px;
position: relative;
margin-bottom: 20px;
}
.banner-container .banner-box {
border-radius: 12px;
min-height: 350px;
background-color: #1C2841;
overflow: hidden;
}
.banner-container .banner-box .banner-div {
top: 50%;
height: auto;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 20px;
z-index: 3;
border-radius: 12px;
border:1px solid red;
}
.banner-div {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
top: 34%;
padding: 10px;
pointer-events: none;
}
.banner-container .banner-box .banner-div .bannerheading {
color: #fff;
}
banner-container .banner-box .banner-img {
min-height: 350px;
border-radius: 12px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.banner-img {
height: 100%;
width: 100%;
min-height: 300px;
background-size: cover;
background-position: center;
}
<div class = "banner-container">
<div class = "banner-box">
<div class = "banner-div">
<div class = "bannerheading">
<p><span>The correct link should be </span></p>
</div>
</div>
<a href = "https://www.google.com/">
<div class = "banner-img" style = "background-image:url('https://ssl.gstatic.com/gb/images/i1_1967ca6a.png');">
</div>
</a>
</div>
</div>
Добавьте свойство pointer-events:none;
в класс .banner-div
.
Какой должен быть кликабельным
.banner-div
или.banner-box
?