CSS: Как мне остановить эффекты наведения текста на текст?

Question

Я надеюсь, что вы поняли вопрос, вы можете увидеть пример здесь:

http://jsfiddle.net/nFbJY/

Когда вы прокручиваете любую из перемещаемых ссылок: (

Любой совет, как решить эту проблему?

HTML:

<div class="links">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS:

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC;          border-radius: 5px; -moz-border-radius: 5px;}
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

Answer 1

Большинство ваших стилей находятся в li, попробуйте переместить их в тег <a> вместо

li 
{
    float: left; 
    margin: 0 .15em; 
}

a, a:active, a:visited { 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 3px 10px 3px 10px;
}

a:hover 
{ 
    border: 1px solid blue; 
    background-color:yellow;
}

Answer 2

Отметьте это http://jsfiddle.net/huhu/Tn2HV/

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li { float:left; }
li a { margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px; }
li a:hover { background-color:yellow;}

<div class="links">
    <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
 </div>

Answer 3

Измените свой CSS на это:

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left;}
a {margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a:hover {border: 1px solid blue; background-color:yellow; }

Таким образом, вы стилируете тег A только вместо LI и A. Таким образом, вместо наложения эффектов, вызывающих заполнение / границу для 2 элементов, вы вызываете его только для одного. Ничто не суетится ...

Answer 4

Попробуйте навести элемент li вместо a

a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

li:hover { background-color:yellow; }

Answer 5

Переключить определение CSS a:hover на li:hover.

http://jsfiddle.net/nFbJY/3/

div.links 
{
    float: left; 
    padding-top:15px;
}
ul 
{
    list-style:none;
}
li 
{
    float: left; 
    margin: 0 .15em; 
    padding: 3px 10px 3px 10px; 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    -moz-border-radius: 5px;
}

li:hover 
{ 
    border: 1px solid blue; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 3px 10px 3px 10px; 
    background-color:yellow;
}

<div class="links">
    <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>

Answer 6

Самый простой способ - добавить margin к элементам a и добавить margin: 0 к a:hover.Таким образом, кнопки всегда имеют одинаковую ширину.Или вы можете сделать что-то похожее с padding (или border).

РЕДАКТИРОВАТЬ: В вашем случае используйте этот CSS (особенно последние 2 строки):

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a { margin: 0 11px; }
a:hover { border: 1px solid blue; margin: 0; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}