Не удаляю разделительные линии при наведении мыши

Question

Не удаляю разделительные линии при наведении мыши

0

Я разрабатывал меню для своего сайта. Я столкнулся с проблемой конвертации в html/css. Идея состоит в том, чтобы иметь разделительную линию на каждой стороне текста, а мышь над навигационными линиями исчезнет и покажет изображение наведения. но что бы я ни делал, линия все еще существует на одной из сторон.

Изображение моего навигационного меню

nav-lnie.png: это всего лишь строка hover.png - это полное изображение наводки

есть ли у кого-нибудь решение или объяснение, как это сделать?

css выглядит так:

.navigation{
width:370px; 
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}

.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0; 
}

.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}

.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}

И html вот так:

<div class="navigation">
    <ul>
       <li><a href="index.php">Videos</a></li>
       <li><a href="top.php">Top Videos</a></li>
       <li><a href="upload_video.php">Upload</a></li>
       <li><a href="faq.php">FAQ</a></li>
    </ul>
</div>

user2966250 07 нояб. 2013, в 20:30

Источник

0

Хм .. вот что делает код, который вы разместили: jsfiddle.net/WXqxD
Josh Crozier 07 нояб. 2013, в 19:22
0

Ну, прежде всего, у вас нет изображений, чтобы увидеть его с помощью скрипки. во-вторых, у меня есть другой код вокруг него, чтобы он выровнялся рядом друг с другом. так что не будет проблемой. но проблема с изображениями.
user2966250 07 нояб. 2013, в 19:26
0

Под разделительными линиями вы подразумеваете белые линии на изображении? Трудно сказать, что вы ищете, когда код, который вы предоставили, не отображается должным образом.
bunndan 07 нояб. 2013, в 20:33
0

да, я имею в виду строки на каждой стороне текста меню. извините, что больше информации должно предоставить больше?
user2966250 07 нояб. 2013, в 20:47

Показать ещё 2 комментария

Теги:

html

css

psd

1 ответ

Ещё вопросы

Хм .. вот что делает код, который вы разместили: jsfiddle.net/WXqxD
Ну, прежде всего, у вас нет изображений, чтобы увидеть его с помощью скрипки. во-вторых, у меня есть другой код вокруг него, чтобы он выровнялся рядом друг с другом. так что не будет проблемой. но проблема с изображениями.
Под разделительными линиями вы подразумеваете белые линии на изображении? Трудно сказать, что вы ищете, когда код, который вы предоставили, не отображается должным образом.
да, я имею в виду строки на каждой стороне текста меню. извините, что больше информации должно предоставить больше?

bunndan · Accepted Answer · 2013-11-07T18-37-00.000Z

Скорее всего, это связано с кодом маржи, который вы здесь:

.navigation ul li{
    background:url(../images/nav-lnie.png) repeat-y right 0;
    margin:0 2px 0 0; 
}

Поскольку справа от каждого пункта меню есть 2px-край, левое поле не будет скрыто, если вы нажмете над следующим элементом. Если край не нужен, вы можете удалить его, и он должен работать нормально, учитывая, что там достаточно места. Если это необходимо, то в команде наведения вы можете изменить интервал элемента:

.navigation ul li a:hover{
    background:url(../images/hover.png) repeat-x;
    margin-left: -2px;
    padding-left: 2px;
}

Конечно, это серьезный взлом, чтобы решить проблему. Интервал может быть отрегулирован и на обоих концах.