Question

我有这段代码，显示如下所示的按钮：

<p class="head_ico_p" title="profile"><img class="head_ico" src="images/profile.png"/></p>

我想使用CSS设置标题（工具提示）的样式，使其看起来如下图所示：

任何人都可以帮助我吗？

Answer 1

试试这个：

HTML

<p class="head_ico_p" title="profile">
   <img class="head_ico" src="https://app.getfloop.com/img/dashboard/app/placeholder-app-icon.png"/>
</p>
<p class="caption">Edit Profile</p>

CSS

    .head_ico_p{
        width:100px;
        margin:20px auto 0;
        text-align:center;
    }
    img{
        width:70px;
    }
    .caption{
        display:block;
        width:100px;
        margin:0 auto;
        background:#333;
        color:#fff;
        text-align:center;
        padding:10px
    }

LIVE DEMO

Answer 2

段：

您可以达到如下所示的效果：

.head_ico_p[title]:hover:after {
  content:attr(title);
  background-color:#000000;
  border:solid 1px #ffffff;
  padding:5px;
  color:#ffffff;
  display:block;
  width:330px;
  height:30px;
}
body {
  background-color:#dddddd;
}

<p class="head_ico_p" title="profile"><img class="head_ico" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/></p>

工作原理：

CSS中使用:after psudeo-class在之后添加另一个“元素”正在被选中的元素。此元素可以由所有标准样式和选择器实现，例如:hover。请注意，还存在:before psudeo类，用于在之前添加另一个“元素”。

content属性可以将:before或after创建的元素的内容设置为预定义值。这可以在CSS（content:"xyz";）中或通过属性指定。后者是您正在寻找的，并使用CSS attr函数将属性的内容作为content的值提取到CSS代码中。

上面的JSFiddle中显示的代码使用上述（和一些其他基本CSS）的组合来创建所需的工具提示效果。

改进措施：

其他答案认为你一直想要它，这假设你想把它作为工具提示（如title）。如果您不希望它在您不悬停时消失，那么您需要做的就是从制作工具提示的CSS选择器中删除:hover psudeo-class。

也许考虑数据属性而不是title，因为title可以在悬停时呈现默认工具提示（浏览器执行此操作）。包含数据属性的代码只使用data-xyz而不是title的所有匹配项。请注意xyz可以替换为您想要的任何内容。

Answer 3

    <html>
<head>
<style type="text/css">
.test{
	display:inline-block;
	box-sizing:border-box;
	width:80px;
	height:110px;
	background:url('http://s15.postimg.org/fjgl2u3h3/Cvt_Lr.png') no-repeat #000;
	color:#fff;
	background-color:#000;
	text-align:center;
	padding-top:85px;
	}
</style>
</head>
<body>
<a class="test" href="#">Profile</a>
</body>
</html>

somethin like that. But you will need to cut the white space from the image. Hope it helps

我如何为<p title =“titlehere”> </p>制作CSS

3 个答案:

段：

工作原理：

改进措施：