我有一个 <div>
包含一个链接。
在这个<div>
的右下角,我有一个覆盖元素,它接管了整个 <div>
悬停时。
此覆盖元素还包含一个链接。
我的问题是覆盖元素中的链接不可点击。
问题是因为我使用了pointer-events: none;
上课.overlay-content
,但如果我不使用它,两个链接都会失效。
请看这里的代码:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
<a href="#">Link</a>
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<a href="#">Link</a>
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
此外,here is fiddle .
有什么办法可以实现吗?
最佳答案
不敢相信我真的找到了一个没有任何缺点的纯 CSS 解决方案。
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
<a href="#">Link</a>
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<a href="#">Link</a>
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
与其在 Angular 按钮上监听 :hover
事件,不如在父元素上监听它。由于 :hover
将被分派(dispatch),而不管元素子元素的鼠标交互如何,可以将 pointer-events: auto
设置为包含链接的子元素(overlay-内容),一旦鼠标悬停在 Angular 按钮上。现在,overlay-content 是可悬停的,因为它是包装 div 的子元素,它将导致 :hover
在整个包装 div 上保持事件状态。
关于javascript - 叠加层中的 CSS 链接接管了一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46246269/