Question

我正在创建一个简单的广告资源应用，目前有一个列出库存中所有商品的表格。当用户将鼠标悬停在每个项目的描述上时，我想要显示每个项目的图像，但是列表中可能有许多不同的项目，每个项目都有自己的图片。我正在使用下面的项目测试一些代码，但它无法正常工作，因为只有两个项目的图像显示。

如何为列表中的每个项目显示不同的图像？

HTML

 <li>
<a href="#">Get Well</a>
<div class="place-image"><img src="../img/Get%20Well.jpg"></div>
</li>

<li>
<a href="#">I Love You</a>
<div class="place-image"><img src="../img/I%20Love%20You.jpg"></div>
</li>

的Javascript

$('a').hover(
function() {
    $('.place-image').fadeIn('slow');
},function() {
    $('.place-image').fadeOut('slow');
}
);

Answer 1

只是推荐，通常最好隐藏而不是销毁，浏览器会感谢你。

为什么呢？当您将显示块变为无，或者无阻塞时，浏览器必须销毁该元素并再次渲染它。当你隐藏它时，浏览器只需要定位它。

HTML

<a href="#"><div class="hover-img">
  Show Image
   <span><img src="http://placehold.it/150x150" alt="image" height="100" />      </span>
</div></a>

CSS

a .hover-img { 
  position:relative;
 }
a .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
a:hover .hover-img span { 
  top: 20px; 
  left:0;
 }

看到它正在运行https://jsfiddle.net/b5Lvq7yL/

另一方面，考虑到你想使用javascript以使其更具可重用性和可维护性，我建议你将这个想法与一些通用CSS结合起来并将其视为你以后可能想要使用的东西对于软件（或其他项目）的其他部分

事实上，你可以概括。

你可以有一个触发器选择器“.onhover-toggle-child-class”，它将其子节点从“data-target”中取出，并在鼠标进入和离开时切换“data-toggle”中的类..

使用相同的HTML，但使用其他CSS类

<div>
  <a href="#" class="relative onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Show Image
    <span class="absolute target hidden on-top">
      <img src="http://placehold.it/150x150" alt="image" height="100" />
    </span>
  </a>
</div>

<div>
  <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="hidden shown">Show Image
    <span class="absolute target2 on-top hidden">
      <img src="http://placehold.it/150x150" alt="image" height="100" />
    </span>
  </a>
</div>

一些超级通用的CSS。

.on-top {
  z-index: 99;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.shown {
  display: block;
}

.hidden {
  display: none;
}

和一些javascript（使用jQuery）

$('.onhover-toggle-child-class').on(
  'mouseenter mouseleave',
  function() {
    var element = $(this);
    var selector = element.data('target');
    var child = element.find(selector);
    var classes = element.data('toggle');


    child.toggleClass(classes);
  }
);

或者，如果你想使用vainilla javascript：

var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
  var element = event.srcElement || event.target;
  var selector = element.getAttribute('data-target');
  var classes = element.getAttribute('data-toggle').split(' ');
  var childs = element.querySelectorAll(selector);
  //console.log(selector, classes, childs);
  childs.forEach(function(child) {
    classes.forEach(function(toggleClass) {
    if (child.classList.contains(toggleClass))
      child.classList.remove(toggleClass);
    else
      child.classList.add(toggleClass);
    });
  });
}

elements.forEach(function(element) {
  element.addEventListener('mouseenter', onhover);
  element.addEventListener('mouseleave', onhover);
});

查看两个示例：https://jsfiddle.net/kg22ajm6/

您可以创建使用不透明度的类：0和不透明度：1以生成“fadeIn”和“fadeOut”。 CSS通常是比原始Javascript或jQuery更好的选择，jQuery的fadeIn和fadeOut手动动画和CSS转换都内置在浏览器中。

使用不透明度动画检查示例：https://jsfiddle.net/Lwcbn0ae/1/

此致

Answer 2

最好的方法是你只使用jQuery。

将jQuery库链接到您的项目，将其放在标题标记
按照代码

$(".Your_class").mouseenter(function(){
        if ($(this).parent('div').children('div.image').length) {
            $(this).parent('div').children('div.image').show();
        } else {
            var image_name=$(this).data('image');
            var imageTag='<div class="image" style="position:absolute;">'+'<img src="'+image_name+'" alt="image" height="100" />'+'</div>';
            $(this).parent('div').append(imageTag);
        }
    });

    $(".Your_class").mouseleave(function(){
        $(this).parent('div').children('div.image').hide();
    });

<html>
<head>
<title>Bikash Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
    <a class="Your_class" href="#" data-image="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">Show Image</a>
</div>
<div style="margin-left:250px;">
    <a class="Your_class" href="#" data-image="http://www.therocks.com/media/52168/The_Rocks_Discovery_Museum_exterior.jpg">Another Image</a>
</div>
</body>
</html>

数据图片： - 在此处保存您的图片名称
为div（imageTag string）fi

Answer 3

使用css display:none将图像隐藏在初始状态，并在鼠标上使用Jquery鼠标在事件上显示它并在鼠标上再次隐藏它：

$( "#id" ).mouseenter(function() {
    // code here
});

$( "#outer" ).mouseout(function() {
    // code here
});

Answer 4

HTML

.hover_img a { position:relative; }
.hover_img  span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

CSS

{{1}}

试试吧......你永远不会把它们放在同一个元素中

将鼠标悬停在文本上时显示图像

4 个答案: