javascript - 如何更改图片标题的 CSS？

Question

我正在使用图像标签，我想为标题添加背景和边框。

<img class="Notestooltip" src="/files/404048/93171/Info-32.png" height="15" width="15" title="test test" style=""/>

Answer 1

这是一个使用 tootltip http://jsfiddle.net/tg5op333/33/ 的例子
这是一个使用 CSS3 的示例 http://jsfiddle.net/tg5op333/34/

HTML(引导工具提示)

<a href="#" data-toggle="tooltip" data-placement="bottom"  data-original-title="test test" class="my-tooltip">Tooltip on bottom
 </a>

JS:(引导工具提示)

 $(document).ready(function(){
     $("a").tooltip();
  });

CSS:(引导工具提示)

.my-tooltip + .tooltip > .tooltip-inner {background-color: #777;}
.my-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#777; }

HTML (CSS3)

<a href="#" title="test test">Tooltip on bottom
</a>

CSS3

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