1
我想知道如何添加工具提示/懸停，只要將鼠標懸停在各個技能欄上就會顯示圖像。我目前只是想弄清楚這些機制。這是我到目前爲止。 我知道如何提示添加到個人技能吧，但我想顯示的圖像而不是文字https://codepen.io/nerd1992/pen/oWRyeq如何在鼠標懸停在技能欄上時顯示圖像
我想使這個網站（ember.enjin.com）左側的列上與此類似魔獸世界的進步部件的東西。我喜歡它，當你將鼠標懸停在個人技術/進度條顯示了老闆被殺
更新：想出如何顯示工具提示中的照片，但我要如何自定義每個工具提示使用不同的映像爲每個技能欄？例如：我想要HTML欄顯示當前圖片。我想讓CSS欄顯示一個農場。和Jquery欄中展示一頭牛。
的Html
<html>
<body>
<h1>jQuery & CSS3 Skills Bar</h1>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
// Tooltip only Text
$('.tool-tip').hover(function(){
// on Hover
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>
<div class="contentContainer">
<div class="tool-tip" title="just to see how this works ">
<div class="skillbar clearfix " data-percent="45%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">45%</div>
</div> <!-- End Skill Bar -->
</div>
<div class="tool-tip" title=" would like to see a pic instead of text ">
<div class="skillbar clearfix " data-percent="65%">
<div class="skillbar-title" style="background: #2980b9;"> <span>CSS3</span></div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skill-bar-percent">65%</div>
</div> <!-- End Skill Bar -->
</div>
<div class="skillbar clearfix " data-percent="50%">
<div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
<div class="skillbar-bar" style="background: #2c3e50;"></div>
<div class="skill-bar-percent">50%</div>
</div> <!-- End Skill Bar -->
</div>
</body>
</html>
CSS
body {
font-family: 'Ubuntu', sans-serif;
width:960px;
}
p{
color:#525252;
font-size:12px;
}
.tooltip {
display:none;
position:absolute;
border:1px solid #111;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#e7e7e7;
}
#a {
display: block;
}
#a:hover + #b {
display:block;
}
#b {
display:none;
}
.contentContainer {
background: #a21f4d;
padding: 30px;
max-width: 800px;
min-width: inherit;
margin: auto;
border-radius: 10px;
Border: solid 5px #8ad000;
}
.skillbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.skillbar-title {
position:absolute;
top:0;
left:0;
width:110px;
font-weight:bold;
font-size:13px;
color:#ffffff;
background:#6adcfa;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.skill-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:11px;
height:35px;
line-height:35px;
color:#ffffff;
color:rgba(0, 0, 0, 0.4);
}
謝謝！幫助我！那麼我現在如何改變每個技能欄的圖像？說HTML技術欄是現場圖片和CSS3之一是穀倉房子圖片？ – nrd1992
你只需要添加像data-img這樣的屬性。查看上面更新的代碼。 – HTCom