gpt4 book ai didi

html - 悬停框并更改顶部的三 Angular 形

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

我有一个盒子,上面有一个三 Angular 形。两者的颜色相同,但将鼠标悬停在框上时,三 Angular 形的颜色保持不变。

如何改变三 Angular 形的颜色?[在此处输入链接描述][1]

.vw-post-box-read-more {
position: absolute;
right: 0;
top: 0;
bottom: 0;
line-height: 1em;
padding: 20px 15px 15px 15px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background-color: #393939;
/*background-color: rgba(255, 255, 255, 0.15);*/
}
.vw-post-box-read-more .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border-color: transparent transparent #393939 transparent;
}
<div class="triangle"></div>
<a class="vw-post-box-read-more" href="">
<span>Read More</span>
<i class="vw-icon icon-iconic-right-circle"></i>
</a>

编辑:Sebastian Olsen 帮助了我,谢谢

最佳答案

您正在尝试设置三 Angular 形的样式,就好像它是 vw-post-box-read-more 的子项一样

试试这段代码:

.vw-post-box-read-more {
line-height: 1em;
padding: 20px 15px 15px 15px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background-color: #393939;
/*background-color: rgba(255, 255, 255, 0.15);*/
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border-color: transparent transparent #393939 transparent;
margin-bottom: 20px;
}
.hover-box:hover > .vw-post-box-read-more {
background-color: red;
}

.hover-box:hover > .triangle {
border-color: transparent transparent red transparent;
}
<div class="hover-box">
<div class="triangle"></div>
<a class="vw-post-box-read-more" href="">
<span>Read More</span>
<i class="vw-icon icon-iconic-right-circle"></i>
</a>
</div>

关于html - 悬停框并更改顶部的三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31495888/

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