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

Question

我使用 CSS 创建了一个“标签”形状(矩形底边 + 三 Angular 形)。因为我有多个标签形状，所以我想将 hover 属性添加到定义该形状的类中，这样可以自动将 hover 附加到所有标签。但是，它似乎不起作用，应用 hover 的唯一方法是通过 id。这是为什么？肯定有一种更简单的方法可以同时将 hover 应用于多个元素。

第二个问题，由于标签形状是使用两个形状构建的，应该如何悬停 应该进行颜色过渡吗？

JSfiddle

#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

DEMO PAGE

#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: border 0.3s;
}

#q:hover{
    background: green;
}

#q:hover:after{
    border-left-color:green;
}

您需要将 :after 的 transition 设置为 border 而不是 background，因为它是正在转换的边框属性。