我在 CSS 中创建了一个向下箭头,但我希望将其视为正方形。目前,要触发任何悬停效果,您需要将鼠标悬停在其中一条线上。我想将鼠标悬停在两行之间以达到相同的效果,但我想不出任何可行的方法。
不幸的是,在解释问题时我很糟糕,所以搜索很困难,所以希望我能在这里得到帮助。下面是我的 CSS 片段。
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
}
<a href="#" class="down"></a>
最佳答案
免责声明:这些值可能需要根据用途进行调整。
这可以通过设置 padding 来完成对于元素。
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
或组合填充:左上右下
padding: 50px 10px 10px 10px;
请看下面的演示:
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
<a href="#" class="down"></a>
关于CSS Hover 将元素视为正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49834804/