لغة البرمجة:إزالة: التمرير للصور؟

Question

ل نص الروابط عندي:

CSS:

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

ولكن هذا يضيف أيضًا تسطيرًا أسودًا على الرابط آي إم جي أنني لا أريد.

كيف أقوم بإزالة border-bottom على IMGs القابلة للربط عند التمرير باستخدام CSS؟

لقد حاولت ما يلي:

a:hover img {border-bottom: 0px}

ولكن هذا لا يعمل

مثال حي (حاول التمرير فوق الشعار في أعلى اليسار)

Answer 1

إذا قمت بتعويم صورك مقابل.سيعمل هذا بشكل مضمن ولن يتطلب أي تعديلات على سمات رابط الصورة التي تتطلبها إجابة ستيف.

a:hover img {
border: none !important;
display: block;
}

Answer 2

a:hover img {border-bottom: 0px;}

الذي عليه أن يقوم بالخدعة.

Answer 3

لست متأكدًا مما إذا كان هذا هو الحل الأفضل، لكنه يعمل:

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

ثم قم بتعيين المراسي التي تحتوي على صور إلى فئة "aimg":

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

Answer 4

لقد نجح هذا معي أيضًا في IE.عرض IE الحدود ولكن مع هذا لم يعد الأمر كذلك.

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

Answer 5

وجدت هذا المثال هنا: https://perishablepress.com/css-remove-link-underlines-borders-linked-images/

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

هذا هو بالضبط ما تريده على ما أعتقد.
يعمل بشكل مثالي في Firefox، ويزيل جميع التأثيرات من الرابط الذي يحتوي على صورة لتنسيقات معينة.

Answer 6

لقد استخدمت jQuery لإضافة فئة "no-hover" إلى جميع العلامات التي تحتوي على صورة:

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

وفي CSS فعلت هذا:

a.no-hover:hover {
  border-bottom: 0px
}

إذا كان jQuery ثقيلًا جدًا بالنسبة لك، فيمكنك استخدامه picoQuery.إنه 1 كيلو فقط، فقط إذا اخترت طريقة .each().

Answer 7

هل جربت a img {border:none} ?