CSS a, a:hover

[DobriMcConnor]

Здравейте,


Започнах работа по един проект, но се запънах на едно меню. Значи, на a съм му задал font-sieze, font-weight и тем подобни, а на a:hover съм задал background: url(img) bottom;. Ето тук е проблема. Този background седи залепен за текста а аз искам да го мръдна 20 пиксела надолу. Пробвам с margin-top на a:hover, но се мърда и текста и ховера надолу. Идеи?

 

[kikity_94]

Сложи hover-a на <li> li:hover {...}

 

[DobriMcConnor]

Е пак същото

[css]#menu {
float:right;
font-size:93%;
line-height:normal;
margin: 45px 90px auto;
font-family: Tahoma;
color: #999999;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;

margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url("images/menu_separator.png") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

#menu a span {float:none;}
#menu li:hover span {color:#ff6600; background: url("images/hover.gif") no-repeat center bottom; margin-top: 10px; } [/css]

<div id="menu">
  <ul>
    <li><a href="#" title="Link 1"><span>Начало</span></a></li>
    <li><a href="#" title="Link 2"><span>Начало</span></a></li>
    <li><a href="#" title="Link 3"><span>Начало</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Начало</span></a></li>
    <li><a href="#" title="Link 5"><span>Начало</span></a></li>
    <li><a href="#" title="Link 6"><span>Начало</span></a></li>
   <li><a href="#" title="Link 7"><span>Начало</span></a></li>
  </ul>
</div>

 

[joTunkiq]

Ами да ти кажа, има значение как ше подредиш параметрите ..
ти си ги подредил така :

no-repeat center bottom; ,

а трябва да са:

center bottom no-repeat ;

Ако нестане и така , направи всяко свойство на отделен ред.
така :
[css] background: url(img) center top;
background-repeat: no-repat;[/css]

ии ако ии така не станее .. пробвайй с скролване на фоновото изображение ... смисъл вместо "center" и "top" .. слагаш това

 background: url(img) scroll 0px 0px no-repat;

като винаги първата 0-ла е X, а другата Y

 

[DobriMcConnor]

Виж сега как излиза

Оранжевата линия е hover-а, аз искам да го мръдна 20 пиксела надолу, пробвам с margin-top: 20px, но се мърда текста + hover-a.

 

[trunv]

Доколкото се вижда hover-a ти е просто една линия. Защо си усложняваш живота, като използваш background-image, а не border-bottom ?

http://jsfiddle.net/zLJxx/

 

[DobriMcConnor]

Добре, и така стана, но искам тази линия да я мръдна 20 пиксела надолу.

 

[anonimen]

Ами тогава вместо с рамка го направи със сянка и й кажи да бъде 20px надолу.

Edit:
Ето код -
[css]a:hover {text-shadow: 0px 20px orange;}[/css]
Това прави сянка 20 пиксела по-надолу

 

[DobriMcConnor]

Друг начин няма ли? Със сянка става много грозно.

 

[StormBreaker]

http://jsfiddle.net/zLJxx/1/

 

[DobriMcConnor]

Много благодаря !