javascript - 将鼠标悬停在技能栏上时如何使图像出现

标签 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);
}

最佳答案

您只需要将 .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>

关于javascript - 将鼠标悬停在技能栏上时如何使图像出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44233394/

上一篇：javascript - 如何在点击按钮后自动加载一个div？

下一篇：javascript - 在 Javascript 中调用 Firebase 数据库 child() 返回 "undefined"

相关文章：

javascript - 按向下箭头键关注列表项

jquery - jQuery 选择器返回的对象的完整 HTML

html - 我的背景图片显示在谷歌浏览器中，但不显示在 firefox 中

javascript - Cordova Geolocation 返回 NAN 的纬度和经度

javascript - Dropzone.js - 在排队文件长度 > 0 上显示按钮

javascript - React.js 从数组创建多个表

javascript - 在单页应用程序中取消绑定(bind)事件监听器和删除子元素的正确方法是什么？

javascript - 在页面上提交表单而不刷新

php - 我们如何才能看到特定视频观看了多少次？ (在PHP中)

javascript - HTML5 表单验证

©2024 IT工具网  联系我们