將鼠標懸停在文本上時顯示圖像

我正在創建一個簡單的庫存應用程序，並且當前有一個列出庫存中所有項目的表格。當用戶懸停在每個項目的描述上時，我想要顯示每個項目的圖像，但是列表中可能有許多不同的項目，並且每個項目都有它自己的圖片。我正在測試下面的項目的一些代碼，但它不能正常工作，因爲只有圖像顯示這兩個項目。將鼠標懸停在文本上時顯示圖像

如何獲取不同的圖像以顯示列表中的每個項目？

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

將鼠標懸停在文本上時顯示圖像

回答

相關問題