顯示更多信息（的onmouseover）

我不知道它是怎麼叫英文，但我希望用戶看到更多的信息，當他徘徊的元素上我的表中，這樣的事情：顯示更多信息（的onmouseover）

enter image description here

它應該描述多於一行的內容，例如：

只有查表的這樣的差異

Molten Coin: 
+17 Defenses 
+11 Attacks

來源

2013-04-15 aleksXPO

https://developer.mozilla.org/zh-CN/docs/HTML/Global_attributes#attr-title – Passerby

謝謝:)這很酷：D但有沒有辦法讓服裝工具提示？像白色背景，更大的字母。 – aleksXPO

然後你必須用JavaScript來模擬這種行爲。 – Passerby

你應該能夠只使用一個CSS工具提示：

body { 
     background-color:black; 
     color:white; 
    } 

    .tooltipDiv { 
     position:relative; 
    } 

    .tooltipDiv span { 
     display:none; 
     position:absolute; 
     top:25px; 
     left:60px; 
     background-color:white; 
     font-size:1.2em; 
     color:black; 
     padding:5px; 
    } 

    .tooltipDiv:hover span { 
     display:inline; 
} 

<div class="tooltipDiv"> 
    My Area Div 
    <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span> 
</div>

檢查出的jsfiddle看到它在行動。

http://jsfiddle.net/ZMuvm/

要知道，雖然，如果你使用：懸停在比錨元素以外的任何peudo類，你失去與IE6的兼容性。就拿本款從MSDN網站不是：

與Windows Internet Explorer 7的開始，當瀏覽器是標準兼容模式（！嚴格的DOCTYPE），你可以應用：懸停僞類任何元素，不僅是鏈接。如果虛擬類別未專門應用於選擇器中的元素（例如，標記），則會採用通用（*）選擇器。不加區別地使用：懸浮僞類可以對頁面性能產生負面影響。 http://msdn.microsoft.com/en-gb/library/ie/cc848866(v=vs.85).aspx

解決這種情況的方法，將是把塊錨元素的DIV中：

可以在上下文這裏進行查看。看看這個搗鼓一個例子：

http://jsfiddle.net/uBF8J/

<div class="tooltipDiv"> 
    <a>My Area Div 
     <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span> 
    </a> 
</div> 


body { 
    background-color:black; 
    color:white; 
} 

.tooltipDiv a { 
    position:relative; 
    display:block; 
} 

.tooltipDiv a span { 
    display:none; 
    position:absolute; 
    top:25px; 
    left:60px; 
    background-color:white; 
    font-size:1.2em; 
    color:black; 
    padding:5px; 
} 

.tooltipDiv a:hover span { 
    display:inline; 
}

來源

2013-04-15 08:23:48 MasNotsram

使用jQuery提示它會正常工作採取以下網址看看

http://jqueryui.com/tooltip/ 或看到下面的代碼

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Tooltip - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(function() { 
$(document).tooltip(); 
}); 
</script> 
<style> 
label { 
display: inline-block; 
width: 5em; 
} 
</style> 
</head> 
<body> 
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover 
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> 
<p>But as it's not a native tooltip, it can be styled. Any themes built with 
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> 
will also style tooltips accordingly.</p> 
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> 
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> 
<p>Hover the field to see the tooltip.</p> 
</body> 
</html>

來源

2013-04-15 09:19:16 abiansh

顯示更多信息（的onmouseover）

回答

相關問題