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

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

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

將 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>

數據圖像：-在此處保留您的圖像名稱
為 div(imageTag string)fi 賦予適當的樣式

Answer 2

只是一個建議，通常隱藏而不是破壞更好，瀏覽器會感謝你。

為什么？ 當您將顯示塊設置為無或無為阻止時，瀏覽器必須銷毀該元素並再次渲染它。 當你隱藏它時，瀏覽器只需要定位它。

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/

您可以創建使用 opacity: 0 和 opacity: 1 的類來制作“fadeIn”和“fadeOut”。 CSS 通常是比原始 Javascript 或 jQuery 更好的選擇，jQuery 的淡入和淡出手動動畫和 CSS 轉換內置在瀏覽器中。

檢查使用不透明度動畫的示例： https : //jsfiddle.net/Lwcbn0ae/1/

問候，

Answer 3

使用 css display:none將圖像隱藏在初始位置，並在鼠標懸停時使用 Jquery 鼠標懸停事件顯示它，再次在鼠標移開時將其隱藏，如下所示：

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

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

Answer 4

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

試試吧……你永遠不會把它們放在同一個元素中

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

問題描述

4 個解決方案

解決方案1
8 已采納 2017-03-09 05:41:17

解決方案2
5 2017-03-09 05:28:48

解決方案3
1 2017-03-09 04:35:36

解決方案4
0 2017-03-09 04:32:32

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

問題描述

4 個解決方案

解決方案1 8 已采納 2017-03-09 05:41:17

解決方案2 5 2017-03-09 05:28:48

解決方案3 1 2017-03-09 04:35:36

解決方案4 0 2017-03-09 04:32:32

解決方案1
8 已采納 2017-03-09 05:41:17

解決方案2
5 2017-03-09 05:28:48

解決方案3
1 2017-03-09 04:35:36

解決方案4
0 2017-03-09 04:32:32