Question

我创建了一个＆＃34;标签＆＃34;使用CSS（矩形底边+三角形）的形状。由于我有多个标记形状，因此我想将hover属性添加到定义该形状的类中，并自动将hover附加到所有标记。但是，它似乎不起作用，hover的唯一方法是id。这是为什么？肯定有一种更简单的方法可以同时将hover应用于多个元素。

第二个问题，因为标签形状是使用两种形状构建的，hover颜色过渡应该如何应该做？

#q{
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:66px;
    padding: 0 35px 0 20px;


    font-size: 25px;
    line-height:65px;

    cursor: pointer;
    font-weight: 100;
    margin: 20px 25px;

    background:#f3f3f3;
    transition: background 0.3s;


}

#q:after{
    position:absolute;
    content:"";
    right:-19px;
    width: 1px;
    height:0px;
    border-left:18px solid #f3f3f3;
    border-top:  33px solid transparent;
    border-bottom: 33px solid transparent;
    transition: background 0.3s;
}

#q:hover{
    background: green;
    border-left:18px solid lightblue;

}

HTML：

<span class="pricetag-right" id="q">tag is here!</span>

Answer 1

这是基于vsync的类选择器的小提琴：

https://jsfiddle.net/ajanini/9z3Lvp90/

.pricetag-right{
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:66px;
    padding: 0 35px 0 20px;


    font-size: 25px;
    line-height:65px;

    cursor: pointer;
    font-weight: 100;
    margin: 20px 25px;

    background:#f3f3f3;
    transition: background 0.3s;


}

.pricetag-right:after{
    position:absolute;
    content:"";
    right:-19px;
    width: 1px;
    height:0px;
    border-left:18px solid #f3f3f3;
    border-top:  33px solid transparent;
    border-bottom: 33px solid transparent;
    transition: border 0.3s;
}

.pricetag-right:hover{
    background: green;
}

.pricetag-right:hover:after{
    border-left-color:green;
}

CSS - 如何在悬停时为特殊形状着色？

1 个答案: