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

Question

I've created a "tag" shape using CSS (the rectangular base + triangle). Since I have more than one tag shape I wanted to add the hover property to the class which defines that shape and that way automatically attach hover to all tags. However, it appears its not working and the only way to apply hover is by id . Why is that? There surely must be an easier way to apply hover to several elements at once.

Second question, since tag shape is built using two shapes, how should the hover color transition should be made?

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;
}

You needed to set the transition of the :after to border and not background , since it's the border property being transitioned.

Answer 2

Here's a fiddle based on vsync's with class selectors:

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;
}