كيف يمكنني إنشاء رابط img ورابط نصي يرتبطان بنفس المكان ويصبح كلاهما نشطًا عند التمرير بشكل مستقل عن الرابط الذي أقوم بالمرور فوقه؟

Question

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

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

تحديث:أريد أيضًا التأكد من أن الرابط النصي الموجود الآن في "الامتداد" لا يمكنه التحرك باستخدام "الهامش الأيسر" فحسب، بل يمكن رفعه لأعلى.افتراضيًا، في الكود، ينخفض ​​إلى مستوى الجزء السفلي من الصورة مقاس 60 × 60 بكسل.أريد أن يكون أعلى حتى يبدو جميلًا ولكن "الهامش السفلي" لا يساعد في ذلك.أريده في "ارتفاع المركز" لصورة 60 × 60 ...وليس في الجزء السفلي منه حيث يذهب بشكل افتراضي.

أيه أفكار؟شكرًا!

ملاحظة.أنا منفتح على JavaScript وأفكار jquery التي نشرها البعض هنا ولكني مبتدئ تمامًا في ذلك وسأحتاج إلى شرح إضافي.انا افضل CSS.

الكود الخاص بي الآن هو:

HTML الخاص بي هو:

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div> 

المغلق الخاص بي هو:

div#example         { float:left; width:358px; height:60px; margin-top:20px; }   
div#example a       { color:#B9B9B9; width:100%;}  
div#example a:hover { color:#67a; text-decoration:none;}  
span.videotext      { margin-left:80px;} 

Answer 1

هل يمكن أن تفعل هذا مع CSS، أو مع جافا سكريبت. دون معرفة العلامات الخاصة بك، وكيف وضعت عناصر الخاص بها، فإنه من غير الممكن تحديد الخيار الذي هو أفضل.

CSS الخيار

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

في هذا المثال، لدينا نص وصورة داخل ارتباط. نحن ثم تعديل لون النص على: حدث تحوم

جافا سكريبت (مسج)

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

وهذا المثال يعرض الحل الذي يضيف ببساطة فئة إلى الحاوية الأصلية، وهذا بدوره يعدل تمثيل اللقب. يتم التحكم في هذا الحدث من قبل يحوم على صورة داخل الحاوية.

تحديث:

وتحديد المواقع النص ليست صعبة. ان طريقة سريعة وسهلة لوضع تكون الحاوية الأصل مع الأقارب، والنص مع المطلق:

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

وهذا مثال سريع. يمكنك تعديل القيم لاحتياجاتك.

Answer 2

وماذا عن

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>

Answer 3

وبناء على الجواب جوناثان، ولكن لجافا سكريبت إذا كنت لا تستخدم مسج:

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>

Answer 4

اعتذاري.لقد أخطأت في قراءة سؤالك.وهنا طعنة أخرى في ذلك:

لغة البرمجة

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

من الواضح أن هناك بعض الأنماط هنا التي لا تحتاج إليها ولكني استخدمتها للاختبار في المتصفح.إذا كنت تريد محاذاة النص عموديًا مع الصورة المصغرة للفيديو، فستحتاج إلى تعيين خاصية ارتفاع الخط على نفس ارتفاع الصورة المصغرة.سيؤدي ذلك إلى دفع النص إلى منتصف الفيديو.