gpt4 book ai didi

html - Chrome 浏览器中的 CSS 梯形可点击区域问题

转载 作者:行者123 更新时间:2023-11-28 04:54:11 25 4
gpt4 key购买 nike

我正在尝试获得一个梯形透视形状,以使整个区域都可以点击。我已经让它在 Firefox 甚至 IE 中工作,但 Chrome 配合得不太好。

这是一个带有形状和链接的 fiddle :http://jsfiddle.net/9n9uh6f6/1/如您所知,直到您将鼠标悬停在文本的“区域”部分上时,链接才会变为事件状态。在其他浏览器中,形状的整个高度都是可点击的。

我读到 Chrome 以不同方式呈现透视图像,这也许就是它没有按预期执行的原因。

这是我的 CSS:

.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}

.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}

最佳答案

请看这段代码:

.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}

似乎按照您想要的方式工作。 fiddle

关于html - Chrome 浏览器中的 CSS 梯形可点击区域问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26186376/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com