마우스 오버 배경 "강조 표시"텍스트 덮기

커서를 올려 놓을 때 배경이 강조 표시되는 탐색 모음을 만들려고하지만 텍스트를 강조 표시하면 더 이상 표시되지 않습니다 (간신히).마우스 오버 배경 "강조 표시"텍스트 덮기

여기에 내 현재 HTML과 CSS입니다 :

a:hover에 귀하의 CSS 텍스트를 거의 볼 수 있도록 일으키는 0.05의 불투명도를 가지고

<header> 
    <img id="logoimg" src = "./images/home.jpg"> 
    <ul class="top-nav"> 
      <li><a href=''>Home</a></li> 
     <li><a href=''>About Us</a></li> 
     <li><a href=''>Products</a></li> 
    </ul> 
c</header> 

.top-nav { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    background: #296E9A; 
    border-radius: 5px; 
} 

.top-nav li { 
    display: inline-block; 
    font-size: 14px; 
    padding: 0; 
    margin: 0; 
    width: 100px; 
    background: #296E9A; 
    text-align: center; 
    border-radius: 5px; 
} 

.top-nav a { 
    line-height: 200%; 
    color: #FFF; 
    text-decoration: none; 
    display: block; 
    font-weight: bold; 
} 

.top-nav a:hover { 
    background: #000; 
    border-radius: 5px; 
    opacity: 0.05; 
}

출처

2014-01-17 user2243357

.top-nav a:hover { 
    border-radius: 5px; 
    opacity: 0.05; /* remove this */ 

    background: rgb(36, 105, 147); /* fallback for IE8 support */ 
    background: rgba(0,0,0,0.05); /* add this for highlighting */ 
}

불투명도 속성을 제거하면 탐색 링크 위로 마우스를 가져 가면 텍스트가 나타납니다.

background: rgba()을 추가하여 알파 투명도로 배경색을 설정합니다. 이는 배경 만 영향을 미치며 텍스트 나 하위 노드에는 영향을주지 않습니다.

또한 rgba()는 최신 브라우저를 지원하지만 IE8 이하는 지원되지 않습니다. 호환성 지원을 위해 rgb() 또는 다른 색상 값을 대체해야합니다.

바이올린 :http://jsfiddle.net/3yf2Q/2/

덕분에 당신은 그것뿐만 아니라 텍스트에 적용하기 때문에 불투명도를 제거하거나 불투명도 지정해야

출처

2014-01-17 02:37:48

주목할만한 점은 OP는 아마도 하이라이트 배경색이 검은 색이 아니라 약간 더 진한 파란색이되기를 원치 않을 것입니다. 'background' 속성을 다음과 같이 변경하는 것이 좋을 것입니다 :'background : rgb (36, 105, 147); 배경 : rgba (0,0,0,0.05);'여기처럼 : http://jsfiddle.net/3yf2Q/2/ – Ming

@setek 당신은 그것을 못 박았습니다. 처음에는 질문을 이해하지 못했을 것입니다. 'rgba (0,0,0,0.05)'는 배경에만 불투명도를 설정할 때 사용합니다. 이것은 IE8 이하에서는 대체 기능을 적용하지 않는 한 작동하지 않습니다. 내 대답을 업데이트 할게. –

필자가 업데이트 한 바이올린을 사용해보십시오. – Ming

: @setek : 1; li 부분은 일종의 하이라이트를 유지합니다.

.top-nav li { 
    display: inline-block; 
    font-size: 14px; 
    padding: 0; 
    margin: 0; 
    width: 100px; 
    background: #296E9A; 
    text-align: center; 
    border-radius: 5px; 
    opacity: 1; 
}

출처

2014-01-17 02:41:50

마우스 오버 배경 "강조 표시"텍스트 덮기

답변

관련 문제