mouseover background «highlight» cover text

Я пытаюсь создать навигационную панель, в которой фон выделяется, когда вы наводите на нее курсор, но когда я это делаю, текст также становится подсвеченным и больше не видимым (едва).mouseover background «highlight» cover text

Вот мой текущий HTML и CSS:

<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

Ваш CSS на a:hover имеет непрозрачность 0,05, что является причиной, чтобы текст был едва виден.

.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() или любое другое значение цвета в качестве резерва для поддержки совместимости.

Fiddle:http://jsfiddle.net/3yf2Q/2/

Благодаря @setek :)

источник

2014-01-17 02:37:48

Стоит отметить, что ОП, вероятно, не хочет, чтобы цвет фона подсветки был черным, а чуть более темным. Было бы неплохо изменить свойство 'background' для:' background: rgb (36, 105, 147); background: rgba (0,0,0,0.05); 'как здесь: http://jsfiddle.net/3yf2Q/2/ – Ming

@setek Вы прибили его. Полагаю, я не понял этот вопрос в первый раз. 'rgba (0,0,0,0,05)' - это путь, когда вы устанавливаете непрозрачность только на фоне. Это не будет работать для IE8 и ниже, если вы не примените резерв. Я уточню свой ответ. –

Не стесняйтесь использовать скрипку, которую я обновил с вашей :) – Ming

Вы должны удалить непрозрачность, так как он относится к тексту, а, или просто указать непрозрачность: 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

mouseover background «highlight» cover text

ответ

Смежные вопросы