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

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

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

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'); 
} 
);

来源

2017-03-09 Andres Quintero

我相信这将需要太多的代码和手动维护。它会如何？ –

最好的办法是，你只是使用jQuery。

链接jQuery库到您的项目，将其头标记
内按照代码

$(".Your_class").mouseenter(function(){ 
 
     var image_name=$(this).data('image'); 
 
     var imageTag='<div 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').remove(); 
 
    });

<html> 
 
<head> 
 
<title>Bikash Test</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<div> 
 
    <a class="Your_class" href="#" data-image="http://www.claraapollo.com/wp-content/uploads/2017/01/images.duckduckgo-3.jpg">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>

数据图像： - 保持你的形象这里的名字
给应用程序ropriate风格的div（imageTag字符串）fi

来源

2017-03-09 05:41:17

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; }

只是尝试它...你从来没有把这两个在一个相同的元素一起

来源

2017-03-09 04:32:32 Jana

把图像隐藏在初始使用css display:none和鼠标悬停使用jquery鼠标悬停事件显示它和鼠标再次隐藏它像：

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

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

来源

2017-03-09 04:35:36

只是建议，通常隐藏而不是销毁，浏览器会感谢你。

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

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); 
    } 
);

或者，如果你想使用拜尼亚的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以使“淡入”成为a nd“fadeOut”。 CSS通常是比原始Javascript或jQuery更好的选择，jQuery的fadeIn和fadeOut手动动画和CSS转换内置在浏览器中。

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

问候，

来源

2017-03-09 05:28:48 cnexans

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

回答

相关问题