如何更改标题标签的背景颜色?

问题描述:

查看此图片...

See this image...

有一个标题标签悬停在每个社交图标上.我正在尝试更改标题标签所在的气泡的背景颜色.

There is a title tag that hovers over each one of the social icons. I am trying to change the background color of the bubble where the title tag is.

我已经尝试过了...

I have tried this...

a[title]:hover:after { background: #8b6ab2; }

但是它不起作用.有没有一般的方法可以做到这一点,或者它必须根据网站是动态的?

But it's not working. Is there a general way this can be done, or does it have to be dynamic based on the website?

我是这样做的.

<a href="#" title="This is the title to show">hover here</a>
<style type="text/css">
  a[title]:hover:after{
    content: attr(title);
    background: red; 
    position: absolute;
    left: 5%;
    top: 10%;}
 </style>

您可以通过使用这样的数据属性来隐藏默认标题

You can hide default title by using a data attribute like this

<a href="#" data-title="This is the title to show">hover here</a>
<style type="text/css">
a[data-title]:hover:after{
  content: attr(data-title);
  background: red; 
  position: absolute;
  left: 5%;
  top: 10%;
}
</style>

此处查看更多