懸停時彈出HTML圖像

我希望這些圖像在我將它們懸停在文本上時可見。但根據這一點，它的作品，但它只選擇第一個，因爲每個圖像都有相同的ID。有誰知道解決這個問題。提前感謝。網頁開發新手。所以請詳細解釋。謝謝。懸停時彈出HTML圖像

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Selectable - Default functionality</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> 

     <script type = "text/javascript" src = "js/jquery.js"></script> 
     <script type = "text/javascript" src = "js/jquery_ui.js"></script> 

     <link rel="stylesheet" href="/resources/demos/style.css"> 

     <style> 
      #feedback { font-size: 1.4em; } 
      #selectable .ui-selecting { background: #FECA40; } 
      #selectable .ui-selected { background: #F39814; color: white; } 
      #selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; } 
      #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 

      img 
      { 
       position:absolute; 
       left:250px; 
       display:none; 
      } 
     </style> 

     <script>   
      $(function() { 
       $("#selectable").selectable(); 
      }); 
     </script> 
    </head> 

    <body> 

     <table id="myTable"> 
      <td> 
       <tr> 
        <ol id="selectable" onmouseover="show(next,true)" onmouseout="show(next,false)"> 
         <li>Item 1 <img src="next.jpg" id="next1"></li> 
         <li>Item 2 <img src="next.jpg" id="next2"></li> 
         <li>Item 3 <img src="next.jpg" id="next3"></li> 
         <li>Item 4 <img src="next.jpg" id="next4"></li> 
         <li>Item 5 <img src="next.jpg" id="next5"></li> 
        </ol> 
       </tr> 
      </td> 
     </table> 

     <script type = "text/javascript"> 
      $(document).ready(function() { 
       $('#selectable').fadeIn('very slow'); 
      }); 
     </script> 

     <script language="javascript"> 
     //function to display the immage 
      function show(id,disp) { 
       if (disp == true) { 
        id.style.display = "block"; 
       } 

       if (disp == false) { 
        id.style.display = "none"; 
       } 
      } 
     </script> 
    </body> 
</html>

來源

2014-07-22 Vithushan

我看來像你應該使用CSS來代替：'李：懸停IMG {顯示：塊;}' 。根本不需要使用JavaScript。 – christian314159

聽起來不錯。非常感謝回覆。我試試這個 – Vithushan

的html代碼：

<a href="#">some text here..<img src="image url" /></a>

CSS代碼：

a img { display:none; } 
a:hover img { display:block; }

來源

2014-07-22 09:15:22 frost

$("#selectable li").mouseover(function(){ 
    $(this).next().show(); 
}); 

$("#selectable li").mouseout(function(){ 
    $(this).next().hide(); 
});

你可以試試這個

來源

2014-07-22 03:45:32 Sweetz

非常感謝回覆。我試試這個。 – Vithushan

如果您不需要任何淡入效果，使用CSS #selectable li:hover img { display: block; }

如果你確實需要的效果，使用此：

$("#selectable li").hover(
    function() { 
     $(this).find("img").fadeIn(1000); 
    }, function() { 
     $(this).find("img").fadeOut(1000); 
    } 
);

來源

2014-07-22 03:56:01 rjpedrosa

實際上您並不需要可選插件來執行此操作 - 您可以使用jQuery hover function。

$(document).ready(function() { 
    $('#selectable li').hover(function(){ 
     $(this).find('img').toggle(); 
    }); 
});

功能是說，如果你懸停在#selectable li元素，它會顯示，然後會做相反的，當您移動從該單元分離。

Fiddle for reference

來源

2014-07-22 03:56:48

懸停時彈出HTML圖像

回答

相關問題