悬停具有悬停效果的图像并在另一个 div 中显示文本答案

【问题标题】：hover an image that has a hover effect and also show text in another div悬停具有悬停效果的图像并在另一个 div 中显示文本
【发布时间】：2015-07-01 21:32:44
【问题描述】：

我有 4 张图像（响应/折叠到 2 和 1）具有悬停效果和应用于它们的链接。在它们下方应该有一个 div（或替代解决方案），当将鼠标悬停在该特定图像上时，它会显示每个图像的描述。所以 4 张图片有 4 种不同的文字，我非常想保持悬停效果。

到目前为止，我为我工作的代码是：

<div class="wrapper grid4">
   <div id="werk-1">
      <article class="col">
         <div class= "hover"><a href="VREESMACHINE.html"><img src="afbeeldingen/vreesmachine-330px.jpg" width="100%" /></a></div>
      </article>
      <article class="col">
         <div class= "hover"><a href="PRINTWERK.html"><img src="afbeeldingen/ted-330px.jpg" width="100%" /></a></div>
      </article>
      <article class="col">
         <div class= "hover"><a href="TEKENINGEN.html"><img src="afbeeldingen/grootel-330.jpg" width="100%" /></a></div>
      </article>
      <article class="col">
         <div class= "hover"><a href="BOEKEN.html"><img src="afbeeldingen/haai-330px.jpg" width="100%" /></a></div>
      </article>
      <div>
         <div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div>
      </div>
   </div>
</div>

【问题讨论】：

好吧，代码在我的问题中没有正确显示，所以我会再试一次：
你能提供更多代码吗？因为很难为您提供这些信息
这样更好——我的意思是这是这个特定部分的完整代码
jQuery 和 CSS 在哪里？

标签： jquery html css hover

【解决方案1】：

为每篇文章添加 data-* 属性，.col 和 mouseover 事件相同，将 .grafischewerktekst div 的文本更改为 data-* 中的文本

DEMO

$('.col').on('mouseover',function()
{
    $('.grafischewerktekst').text($(this).attr('data-desc'))
});

img{
    width:100px;
    height:100px;
    float:left;
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper grid4">
   <div id="werk-1">
      <article class="col" data-desc="Image 1 description"><!--add your image description to data-desc-->
         <div class= "hover"><a href="VREESMACHINE.html"><img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg" width="100%" /></a></div>
      </article>
      <article class="col" data-desc="Image 2 description">
         <div class= "hover"><a href="PRINTWERK.html"><img src="http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg" width="100%" /></a></div>
      </article>
      <article class="col" data-desc="Image 3 description">
         <div class= "hover"><a href="TEKENINGEN.html"><img src="http://i.telegraph.co.uk/multimedia/archive/03025/saatchi-plug-hole_3025834k.jpg" width="100%" /></a></div>
      </article>
      <article class="col" data-desc="Image 4 description">
         <div class= "hover"><a href="BOEKEN.html"><img src="http://1.bp.blogspot.com/-MHxFnsPcldo/T6wD3La83DI/AAAAAAAAGSI/W9KKoTN2NVk/s1600/anaconda-Python-1.jpg" width="100%" /></a></div>
      </article>
      <div>
         <div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div>
      </div>
   </div>
</div>

【讨论】：

感谢 SWIFT 的回复 - 我已经测试了来自 Guruprasad 的回复，因为 sn-p 正是我正在寻找的。但是我没有成功让它工作 - 只是复制它并粘贴它。我已经把 jqeurie 放在它上面的代码中（在之间可能是问题吗？
检查页面中的控制台错误！！最好将script 放在</body> 之前
我还在从最初的震惊中恢复过来——这就是诀窍，就像一个魅力——我现在不知道如何感谢你。我来自荷兰，不管你信不信，我正遭受热浪的折磨，而你创造并拯救了我的一天！非常感谢！
@FransGoris.. 随时.. 很高兴它有帮助！如果它对您有帮助，您可以将其标记为答案.. :) Happy Coding.. :)
你能帮我做一件事吗 - 我希望文本淡入并添加：$('.grafischewerktekst').text($(this).attr('data-desc' )) $('.grafischewerktekst').text($(this).attr('data-desc')).fadeIn('slow') - 但这不起作用，也不能简单地添加 .fadeIn('slow')就在 ('data-desc')) 部分之后 - 你能告诉我我错过了什么吗？

【解决方案2】：

如果我正确理解了您的问题：

每张图片都有一些描述，悬停时它会获取描述文本并将其显示在您的“grafischewerktekst”类中。

HTML：

<div class="wrapper grid4">
  <div id="werk-1" style="width: 400px;">
    <article class="col">
      <div class= "hover"><a href="VREESMACHINE.html"><img src="afbeeldingen/vreesmachine-330px.jpg" width="100%" /></a>
        <div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 1</div>
      </div>
    </article>
    <article class="col">
      <div class= "hover"><a href="PRINTWERK.html"><img src="afbeeldingen/ted-330px.jpg" width="100%" /></a>
        <div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 2</div>
      </div>
    </article>
    <article class="col">
      <div class= "hover"><a href="TEKENINGEN.html"><img src="afbeeldingen/grootel-330.jpg" width="100%" /></a>
        <div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 3</div>
      </div>
    </article>
    <article class="col">
      <div class= "hover"><a href="BOEKEN.html"><img src="afbeeldingen/haai-330px.jpg" width="100%" /></a>
        <div class="description" style="display: none;">THE SPECIFIC TEXT TO DISPLAY 4</div>
      </div>
    </article>
      <div><div class="grafischewerktekst">THE SPECIFIC TEXT TO DISPLAY</div></div>
  </div>
</div>

JS：

   $('.hover').hover(function(){
    $('.grafischewerktekst').html($(this).find('.description').html());
   }, function(){
    $('.grafischewerktekst').html('');
   });

【讨论】：