جيسي يتلاشى في / خارج على الماوس؟

Question

لدي روابط في الهيكل التالي وأود أن أعرف ما يجب أن يكون مسج / CSS لإخفاء <img /> العلامات وتتلاشى لهم في الماوس.

الفكرة هنا هي أن HTMLu003Cimg> مخفية ويتلاشى في Mouseover لتوفير تأثير سلس.

وفي الوقت نفسه تظهر خلفية CSS في البداية.

لغة البرمجة:

u003Cdiv id="nav" style=";text-align:right;direction:rtl">

u003Ca href="blah" id="id1">

u003Cimg src="hoverimg.png" alt="ربط النص 1."n />u003Cspan>ربط النص 1.u003C/span>

u003Cimg src="hoverimg2.png" alt="ربط النص 2."n />u003Cspan>ربط النص 2.u003C/span>

u003C/div>

CSS:

#nav a span{
  display: none; /* Hide the text reader title */
}

#nav a {
  display: block;
  height: 200px;
  width: 250px;
  background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */
}

#nav a img{
  /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */
}

jQuery:

???

في ملاحظة جانبية، لاحظت أن JQuery سيقوم بتشغيل الرسوم المتحركة عدة مرات إذا كان العنصر المستهدف عقدة طفلة متداخلة بضع مستويات عميقة. هل هناك طريقة لوقف هذا؟

Answer 1

فقط أضف أ style="display: none;" Atch to the Image HTML، ثم استخدم هذا:

       $("#nav").hover(
            function() {
                $("img", this).show();
            },
            function() {
                $("img", this).hide();
            });

(تعديل التأثيرات لاحتياجاتك إذا عرض / إخفاء ليس ما تحتاجه)