1
個々のスキルバーにマウスを乗せるたびに画像を表示するツールチップ/ホバーを追加する方法を知りたいと思います。私は現在、力学を理解しようとしています。ここまで私がこれまで持っていたことがあります。 は、私は、個々のスキルバーにツールチップを追加する方法を知っているが、私は私が側柱を残したこのウェブサイト上のこのすごい進歩ウィジェット（ember.enjin.com）に似た何かを作りたいの代わりにテキストhttps://codepen.io/nerd1992/pen/oWRyeqスキルバー上にマウスを置いたときに画像を表示する方法
の画像を表示したいと思います。私はそれは上司が殺されたかを示してどのようにあなたは、個々のスキル/プログレスバーにカーソルを合わせると好き
更新：がツールチップで写真を表示する方法を考え出したが、どのように私は別の画像で各ツールチップをカスタマイズしますスキルバーごとに？たとえば、HTMLバーに現在の画像を表示させたいとします。 CSSバーにファームを表示したい。そしてJqueryバーは牛を見せます。あなただけの（）関数を.htmlに（）関数を.textの変更する必要が
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