호버 효과를 적용하는 방법 : before 의사 선택기?

Question

저는 구석에 작은 녹색 별이있는 블록으로 표시되는 매우 단순한 링크가 있습니다.

JsFiddle

나는 당신이 링크를 통해 마우스를 가져 가면, 링크 자체가 약간 투명하게 진행되도록을 만들고 싶어하지만, :before 의사 선택은 영향을받지 않습니다.

나는 이것에 관해 약간의 questions를 보았다. 그러나 웬일인지 나는 그들의 해결안을 얻을 수 없었다. 이것이 가능한가? 잘못된 CSS 선택기를 쓰고 있는지 확실하지 않습니다.

편집 : 이상적으로 배경 이미지와 배경색을 모두 처리 할 수 ​​있기를 원합니다.

Answer 1

대신 rgba(r, g, b, a) 값을 사용하십시오.

On :hover 알파 값을 변경하십시오.

---

당신은 이미지를 처리하는 경우

a { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(255, 0, 0, 1); 
 
    position: relative; 
 
} 
 
a:before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: white; 
 
    content: "★"; 
 
    background: green; 
 
} 
 
a:hover { 
 
    background: rgba(255, 0, 0, 0.5); 
 
}

<a href="www.google.com"></a>

, 당신은 실제로 부모에 영향을 미치지 않고 이미지의 투명도를 변경할 수 없습니다. 의사 선택기를 실제로 사용하려면 요소 주변에 컨테이너를 만들고 :before 선택기를 연결 한 다음 hover 상태를 내부 요소에만 적용하면됩니다. chipChocolate.py가 빨리 @

div { 
 
position: relative; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url(http://suptg.thisisnotatrueending.com/archive/19343530/images/1338832441002.png); 
 
} 
 

 
div:before { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
    content:"★"; 
 
    background: green; 
 
    z-index: 2; 
 
} 
 

 
a:hover { 
 
opacity: 0.5; 
 
}

<div> 
 
    <a href="www.google.com"></a> 
 
</div>

다음은, 예를 jsFiddle