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

Question

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

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

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

<div class="hover_img">
<span><img src="images/01.png" alt="image" height="100" /></span
<a href="#">Show Image</a>
</div>

CSS

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

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

Answer 2

使用 css display:none 将图像隐藏在初始位置并在鼠标悬停时使用 Jquery 鼠标悬停事件显示它并在鼠标移出时再次隐藏它，例如：

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

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

Answer 3

只是一个建议，通常隐藏比破坏更好，浏览器会感谢你。

为什么？当你将显示块转为 none 或 none 阻塞时，浏览器必须销毁该元素并重新渲染它。当你只是隐藏它时，浏览器只需要定位它。

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" 中获取它的子项并切换 [=52= 中的 classes ] 每当鼠标进入和离开..

使用与您相同的 HTML，但其他 CSS classes

<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 的 classes 以制作 "fadeIn" 和 "fadeOut"。 CSS 通常是比原始 Javascript 或 jQuery 更好的选择，jQuery 的淡入和淡出手动设置动画，并且 CSS 过渡内置于浏览器中。

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

此致，

Answer 4

最好的方法就是使用 jQuery。

Link 将 jQuery 库添加到您的项目中，将其放在 header 标签内
关注代码

$(".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="https://i.stack.imgur.com/q1b4w.jpg?s=64&g=1">Another Image</a>
</div>
</body>
</html>

data-image :-在此处保留您的图片名称
为 div(imageTag string)fi

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

Display image when hover over text

javascript

jquery

onmouseover

jquery-hover