HTML onmouseover無法顯示文字

我想在onmouseover/onmouseout事件發生時在圖片上顯示一些信息。我想要達到的是像this website這樣的暢銷產品。HTML onmouseover無法顯示文字

我的代碼是這樣的：

<div class="container" onmouseover="$('#info').css('display','block');" onmouseout="$('#info').css('display','none');"> 
<img src=..."> 
    <div id="info" style="display:none"> 
     ... some text ... 
</div> 
</div>

所以DIV信息塊最初是隱藏的，但是，當鼠標在圖片上我想要的信息出現在圖像上相應的畫面（與色調背景請看文字）。但有點它不起作用。我很欣賞任何建議如何解決這個問題。

編輯：我忘了提及div id info不存在於css中。我不確定我需要動態創建規則並將其附加到正文。此外，我之所以選擇使用內聯，是因爲我需要顯示/隱藏與用戶將鼠標放置/放出的圖像相對應的文本（包含唯一的div ID）。這意味着我有很多div容器，每個容器都有唯一的div ID。

來源

2012-04-13 REALFREE

我覺得你的方式是錯誤的

試試這個

<html xmlns="http://www.w3.org/1999/xhtml"> 

      <head> 
       <title>Horton Computer Solutions Home</title> 

      </head> 
      <style type="text/css"> 
      .container{ 
      width:100px; 
      } 

      </style> 
      <script type="text/javascript"> 
      function over(){ 

      document.getElementById("info").style.display="block" 
      } 
      function out(){ 
      document.getElementById("info").style.display="none" 
      } 
      </script> 
     <body> 

      <div class="container"> 
    <img src="" alt="asdasd" onmouseover="over()" onmouseout="out()"> 
    <div id="info" style="display:none"> 
     ... some text ... 
     ... some text ... 
     ... some text ... 
      ... some text ... 
      ... some text ... 
      ... some text ... 
    </div> 
    </div> 



      </body> 
      </html>

來源

2012-04-13 09:44:03 srini

首先，我建議你製作功能，而不是僅僅在onMouseOver標籤上做東西。它使得它非常難讀，你可以通過使用雙重qoutes來簡單地犯錯誤，並且你會得到語法錯誤。

二，什麼不行？它沒有出現嗎？順便說一句，你可以使用$（'＃info'）.show（）和.hide（）。做同樣的事情。

來源

2012-04-13 09:27:03

用這個代替：

<div class="out overout"> 
    <span>move your mouse</span> 
    <div class="in"> 
    </div> 
</div> 

<script> 
    var i = 0; 
    $("div.overout").mouseover(function() { 
    i += 1; 
    $(this).find("span").text("mouse over x " + i); 
    }).mouseout(function(){ 
    $(this).find("span").text("mouse out "); 
    }); 
</script>

訪問這裏Demo

來源

2012-04-13 09:28:08

用這個代替內聯onmouseover和onmouseout：

$('.container').mouseover(function() { 
    $('#info').show(); 
}).mouseout(function() { 
    $('#info').hide(); 
});

而且，這也是更好地使用show();/hide();代替css('display','block');/css('display','block');

因此，代碼將是：

<div class="container"> 
    ... 
    <div style="display:none" id="info"> 
     ... 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.container').mouseover(function() { 
      $('#info').show(); 
     }).mouseout(function() { 
      $('#info').hide(); 
     }); 
    }); 
</script>

來源

2012-04-13 09:28:17 kpotehin

你應該把在一個腳本標籤，如下所示：http://www.w3schools.com/js/js_howto.asp 現在你把jQuery的在你的HTML。

如果你把它放在你的頁面的底部，做它像這樣：

$('#container').mouseenter (function() { 
    $('#info').css('display','block'); 
});

和

$('#container').mouseout (function() { 
    $('#info').css('display','none'); 
});

來源

2012-04-13 09:28:30 mparryy

你可以試試這個：

<script type="text/javascript"> 
function showdiv() { 
$(document).ready(function() { 
$('#info').css('display','block'); 
}); 
} 

function hidediv() { 
$(document).ready(function() { 
$('#info').css('display','none'); 
}); 
} 
</script> 

<div class="container" onmouseover="showdiv()" onmouseout="hidediv()">

來源

2012-04-13 09:29:24 Kevin

你必須讓你的「onMouseOut」事件在div上顯示

這段代碼工作

<img src="" style="width:50px;height:50px;" onmouseover="testOn();" > 
<div onmouseout="testOut();" id="info" style="width:50px;height:50px;display:none;color:white;background-color:black;opacity:0.7; position:relative;top:-50px;"> 
    bla bla 
</div> 
<script type="text/javascript"> 
    function testOn() 
    { 
     $('#info').css('display','block'); 
    } 

    function testOut() 
    { 
     $('#info').css('display','none'); 
    } 
</script>

來源

2012-04-13 09:31:02

試試這個代碼，它在onmouseover事件替換圖片。但在Internet Explorer中不起作用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>onmouseover, onmouseout test</title> 
</head> 
<body> 
<img src="image1.png" alt="" onmouseout="this.src='image1.png'" onmouseover="this.src='image2.png'">&nbsp; 
</body> 
</html>

來源

2012-04-13 09:45:13 Wallstrider

HTML onmouseover無法顯示文字

回答

相關問題