لن تزيل خطوط المقسم على الماوس

Question

لقد تم تصميم قائمة لموقع الويب الخاص بي. لقد وصلت إلى مشكلة في التحويل إلى 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>

Answer 1

من المرجح أن يكون رمز الهامش لديك هنا:

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

نظرًا لوجود هامش 2 بكسل على يمين كل عنصر من عناصر القائمة ، فلن يتم إخفاء الهامش الأيسر إذا كنت الماوس فوق العنصر التالي. إذا لم يكن الهامش ضروريًا حقًا ، فيمكنك إزالته ويجب أن يعمل بشكل جيد ، نظرًا لوجود مساحة كافية. إذا كان ذلك ضروريًا ، فعندئذٍ في أمر Hover ، يمكنك تغيير التباعد على العنصر:

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

بالطبع ، إنه اختراق تقريبي لإصلاح المشكلة. يمكن ضبط التباعد على كلا الطرفين أيضًا.