将鼠标悬停在技能栏上时如何显示图像

时间：2017-05-29 00:57:38

标签： javascript jquery html css tooltip

我想知道如何添加工具提示/悬停，只要您将鼠标悬停在各个技能栏上，它就会显示图像。我目前只是想弄清楚机制。这是我到目前为止所拥有的。  我知道如何将工具提示添加到各个技能栏但我想显示图像而不是文字https://codepen.io/nerd1992/pen/oWRyeq

我想在此网站（ember.enjin.com）左侧栏目中创建与此WoW进度小部件类似的内容。我喜欢当你将鼠标悬停在个人技能/进度条上时，它会显示哪些老板被杀死了

更新： 了解如何在工具提示中显示照片，但如何针对每个技能栏为每个工具提示自定义不同的图像？例如：我希望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);
}

1 个答案:

答案 0 :(得分：2)

您只需将.text（）函数更改为.html（）函数即可。 html中的参数支持完整的html标记。例如：

$('<p class="tooltip"></p>')
            .html('<img src='....')
            .appendTo('body')
            .fadeIn('slow');

您可以在此处测试结果：

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');
    var img = $(this).find('.skillbar').attr('data-img');
    $('<p class="tooltip"></p>')
      .html('<img src="'+img+'" >')
      .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
      })
  });

});
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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="contentContainer">

  <div class="tool-tip" title="just to see how this works ">
    <div class="skillbar clearfix " data-percent="45%" data-img='http://c1.staticflickr.com/3/2930/34086850331_898dc05710.jpg'>
      <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%" data-img='http://c1.staticflickr.com/4/3867/15146361238_02195dae48.jpg'>
      <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="tool-tip" title=" would like to see a pic instead of text ">
  <div class="skillbar clearfix " data-percent="50%" data-img='http://c1.staticflickr.com/3/2807/34365995715_47e1a30af9.jpg'>
    <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>
  </div>
  <!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
  <div class="skillbar clearfix " data-percent="40%" data-img='http://c1.staticflickr.com/3/2217/2541032116_27e5abbf4b.jpg'>
    <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
    <div class="skillbar-bar" style="background: #5a68a5;"></div>
    <div class="skill-bar-percent">40%</div>
  </div>
  </div>
  <!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
  <div class="skillbar clearfix " data-percent="75%" data-img='http://c1.staticflickr.com/3/2643/3984053325_8063a8ab88.jpg'>
    <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
  </div>
  </div>
  <!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
  <div class="skillbar clearfix " data-percent="100%" data-img='http://c1.staticflickr.com/4/3933/15638877405_2d19888d42.jpg'>
    <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
    <div class="skillbar-bar" style="background: #2ecc71;"></div>
    <div class="skill-bar-percent">100%</div>
  </div>
  </div>
  <!-- End Skill Bar -->
<div class="tool-tip" title=" would like to see a pic instead of text ">
  <div class="skillbar clearfix " data-percent="70%" data-img='http://c1.staticflickr.com/1/297/19176156656_5520b9b4a7.jpg'>
    <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
    <div class="skillbar-bar" style="background: #4288d0;"></div>
    <div class="skill-bar-percent">70%</div>
  </div>
  </div>
  <!-- End Skill Bar -->
</div>

相关问题
最新问题