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

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

An image of my navigation menu

нав-lnie.png: всего лишь линия hover.png это весь Mouseover изображение

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

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>

источник

2013-11-07 user2966250

Хм .. так вот код, который вы выложили: http://jsfiddle.net/WXqxD/ –

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

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

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

.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; 
}

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

источник

2013-11-07 20:52:44 bunndan

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

ответ

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