Question

如何设置图片标题的样式，以便显示如下标题：http://s28.postimg.org/qd6ic020d/hover.png 谢谢你的每一个答案

Answer 1

这些被称为工具提示。你可以为这些东西查找很多插件。

e.g。

谷歌是你的朋友。

许多人需要JS，但只能通过CSS来实现：

e.g。

http://www.menucool.com/tooltip/css-tooltip
http://www.cssportal.com/css-tooltip-generator/
还有更多

Answer 2

你可以试试这个

<强> HTML

<a href="#" title="Hello world!">Hello</a>

<强> CSS

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Answer 3

您可以使用popover

中的bootstrap

以下是

$(document).ready(function() {



  $('[data-toggle="popover"]').popover({
    trigger: "hover"
  });


});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">hover here. Toggle popover</a>
</div>

更新：您可以像{/ p>一样悬停popover

   //Top
   <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>

   //bottom
   <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

   //left
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a> 

  //right
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

如果我将鼠标放在图像上，则显示文本

3 个答案: