호버 대상 텍스트 색

Question

CSS 버튼을 만들었지 만 버튼 위에 마우스를 가져 가면 텍스트 색상을 흰색으로 변경하는 방법을 알 수 없습니다.

나는 색상을 추가

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 

 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

a.button1o:hover 

에 작동하지 않습니다.

나는 또한 시도 :

• a.button1o 텍스트가 :

  a.button1o:hover .button1o-text { 
      color: white; 
  } 
  

  은 또한 당신이를 놓아야합니다 : 당신은 부모 요소에 :hover 선택기를 사용할 수 있습니다

Answer 1

하지 span 내가 a.button1o:hover에 color:#fff을 추가 한 위의 코드에서이

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    color: #f44336; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

을 시도하고도 내가 #f44336 추가 ~ .button1o

또 다른 방법은 당신은 두 가지 옵션이 있습니다이

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
a.button1o:hover span { 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

Answer 2

를 가져 첫 번째 선언 안에 transition 속성이 있어야합니다. 그렇지 않으면 사용자가 버튼 위로 마우스를 가져 가면 전환이 사라집니다. 당신이 a에 색상을 적용하고 있기 때문이다

는

.button1o { 
    background-color: transparent; 
    padding: 10px 15px; 
    margin-right: 15px; 
    border: 2px solid #f44336; 
    border-radius: 2px; 
    transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover { 
    background-color: #f44336; 
} 
a.button1o:hover .button1o-text { 
    color: white; 
} 

.button1o-text { 
    font-size: .7em; 
    font-family: 'PT Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    color: #f44336; 
} 

Answer 3

같다. 더 깨끗한 옵션은 color: #f44336 규칙을 .button1o-text에서 .button1o으로 옮기는 것입니다. 그러면 현재 마우스 오버 규칙에 따라 색상이 무시됩니다.

.button1o:hover .button1o-text { 
    color: [hover color]; 
} 

Answer 4

당신이 호버 속성을 추가해야합니다 (? 당신이 전혀 별도의 CSS 규칙과 범위를 가지고 이유가)

는

다른 옵션은 텍스트 색상이 가져가 규칙을 추가하는 것입니다 span 요소. 즉 :

여기

a.button1o>span:hover { 
    color:white; 
} 

질문에서 귀하의 작업 코드

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
     color:white; 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 
a.button1o>span:hover { 
 
     color:white; 
 
    } 
 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

Answer 5

확인이 fiddle입니다.

CODE

이 당신이 원하는대로 일이 않는 경우 말해해야한다, 당신을 감사합니다. a.button1o에 흰색 :

a.button1o:hover{ 
background-color: #f44336; 
transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover .button1o-text{ 
color: #fff; 
transition: all 0.9s ease 0.1s; 
} 

Answer 6

당신은 은 단순히 button1o 클래스로 설정을 통합하고 색상을 추가 ... 스팬 클래스 = "button1o 텍스트가 필요하지 않습니다. 호버 클래스

<a class="button1o" href="" target="_blank">Flat button</a> 

당신은 텍스트 장식을 추가해야 할 수도 있습니다.. 어느 것도 너무 button1o의되어 정의에 속성 없습니다

Answer 7

을 당신이 가져가 잘못 넣어이 클래스는이 색상

.button1o 오버라이드 (override)되어 .button1o 클래스 만 .button1o 텍스트에 마우스 오버를 가하고 있습니다

코드를이 방법으로 입력하십시오.

.button1o { 
background-color: transparent; 
padding: 10px 15px; 
margin-right: 15px; 
border: 2px solid #f44336; 
border-radius: 2px; 
} 
.button1o-text { 
font-size: .7em; 
font-family: 'PT Sans', sans-serif; 
font-weight: 700; 
text-transform: uppercase; 
letter-spacing: 0; 
color: #f44336; 
} 
a.button1o:hover { 
background-color: #f44336; 
} 
span.button1o-text:hover { 
transition: all 0.9s ease 0.1s; 
color:#fff; 
}