(HTML/CSS) Наведение "li" без зависания текста с "li"

У меня проблема.(HTML/CSS) Наведение "li" без зависания текста с "li"

Я создал неупорядоченный список и установить некоторые элементы списка в нем и сделал это Css для него:

li { 
opacity: 0.5; 
} 

li:hover{ 
opacity: 1; 
}

Проблема с этим состоит в том, что всякий раз, когда я перестану зависание пикселя от слова из «ли », он перестает зависать« li »и устанавливает непрозрачность обратно на 0,5, вызывая эффект мерцания всякий раз, когда я перемещаю мышь. Как создать «ли», который действует как блок, чтобы этого не произошло? Я попытался создать div внутри каждого «li» и сделать его div: hover, но то же самое произошло. Спасибо за помощь.

ПОЛНОГО HTML и CSS (наценка и сброс вещи CSS не включено):

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Example</title> 
     <link rel="stylesheet" href="file.css"> 
     <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body> 
    <div class="header"> 
     <p><span>Example </span>One</p> 
     <ul id="nav_bar"> 
     <li class="nav_button"><a>Overview</a></li> 
     <li class="nav_button"><a>About</a></li> 
     <li class="nav_button"><a>Help</a></li> 
     </ul> 
     <div class "logo"><img class="logo" src="http://i.imgur.com/jufQbVj.png"></div> 
     <p id="intro">Random message here.</p> 
     <div id="PlayNow">Click here to x!</div> 
     <p id="versao">For bla bla<p> 
    </div> 
    </body> 
</html> 

font-face { 
    font-family: UbuntuR; 
    src: url(Ubuntu-R.ttf); 
} 

@font-face { 
    font-family: UbuntuB; 
    src: url(Ubuntu-B.ttf); 
} 

@font-face { 
    font-family: UbuntuL; 
    src: url(Ubuntu-L.ttf); 
} 

body{ 
    background-color: #e4a714; 
    cursor: default; 
} 

.header { 
    padding: 16px; 
    position: relative; 
    text-align: center; 
    background-color: #231f20; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.header span{ 
    font-family: UbuntuB; 
} 

#nav_bar .nav_button { 
    display:inline-block; 
    padding-left: 6px; 
    padding-right: 6px; 
    cursor: pointer; 
    opacity: 0.5; 
    font-family: UbuntuL; 
    color: white; 
    font-size: 16px; 
} 

#nav_bar .nav_button:hover{ 
    opacity: 1; 
} 

.logo{ 
    margin-top: -50px; 
    margin-bottom: -90px; 
    height: 500px; 
    width: 500px; 
} 

.header p{ 
    color: white; 
    font-family: UbuntuL; 
    font-size: 26px; 
    padding-bottom: 12px; 
} 

#intro { 
    padding-top: 25px; 
    padding-bottom: 30px; 
    font-size: 38px; 
    font-family: "Segoe WP", "Segoe UI Light", "Segoe UI", "Helvetica Neue", "Arial", sans-serif; 
} 

#PlayNow { 
    background-color: #e4a714; 
    font-family: UbuntuL; 
    display: inline-block; 
    color: white; 
    padding: 15px; 
    font-size: 24px; 
    border-radius: 3px; 
} 

#PlayNow:hover { 
    background-color: #ffbb16; 
} 

#versao { 
    font-family: font-family: "Segoe WP", "Segoe UI Light", "Segoe UI", "Helvetica Neue", "Arial", sans-serif; 
    margin-top: 6px; 
    font-size: 16px; 
    opacity: 0.6; 
}

Снимите:

<div class "logo"><img class="logo" src="http://i.imgur.com/jufQbVj.png"></div>

из кода, и он начинает работать как положено.

Любые рекомендации тому, что я делаю неправильно, тоже помогут. Благодарю.

источник

2015-02-14 Myntekt

Ум, обеспечивающий [пример] (http://jsfiddle.net)? –

Как я могу загрузить свою папку здесь? – Myntekt

Вы не можете. Но вы можете предоставить соответствующий HTML/CSS. –

Вы должны очистить край: -50. Поля изображения покрывают неупорядоченный список, которые вызывают эффект выцветания.

Если вам нужно, чтобы логотип приблизился к меню, вам нужно отредактировать его с помощью редактора фотографий.

источник

2015-02-14 23:08:26 Peter

Не могли бы вы объяснить, почему это должно работать, чтобы кто-то мог действительно узнать из вашего ответа. – morkro

Извините, мой английский плохой, но объяснение в ответе: Вопрос был: ,, Как я могу сделать «ли», который действует как блок ». Таким образом: display: block – Peter

Не беспокойтесь о своем английском , Я не являюсь носителем языка;) Просто публикация фрагмента кода, даже если это очевидный ответ, на самом деле не является _helping_ людьми, которые не имеют понятия, что происходит :) – morkro

(HTML/CSS) Наведение "li" без зависания текста с "li"

ответ

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