Question

我有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>

Answer 1

如果我理解你的问题：

每个图片都有一些描述，在悬停时它会采用该描述文本并将其显示在“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('');
   });

Answer 2

为每篇文章添加data-*属性，其中包含类.col和mouseover事件，将.grafischewerktekst div的文本更改为{{1}中的文本}}

<强> DEMO

data-*

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

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

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

2 个答案: