CSS - 从图像标签设置标题样式

时间:2022-11-04 18:09:24

I'm trying to style the title from the image tag.

我正在尝试从图像标签设置标题样式。

I have search other question but can´t it put working in my project.

我已经搜索了其他问题但是它无法在我的项目中工作。

But I can´t make any changes.

但我无法做出任何改变。

Someone can give me hand with this pls?

有人可以帮我这个忙吗?

my code:

我的代码:

table.tablesorter tbody tr td a:hover img[title]:after
{
	content: attr(title);
	padding: 4px 8px;
	color: #FFF;
	background-color:black;
}
<table class="tablesorter" style="width:98% !important">
    <thead>
        <tr>
            <th>
               .....
            </th>
        </tr>
    </thead>

	<tbody>            
            <tr>
                <td>
                   ..........
                </td>
               	<td>
                    <a href="@Url.Action("Edit","Account", new { id=item.UserId })">
                        <img src="~/Content/images/icon_edit.png" title="Edit"/>
                    </a>
               </td>
  			</tr>
    </tbody>

	<tfooter>
	</tfooter>
</table>

1 个解决方案

#1


1  

It should be content: attr(title);, not content: attr(data-title); - you don't have a data attribute.

它应该是内容:attr(标题);而不是内容:attr(数据标题); - 您没有数据属性。

Also, it seems ::before and ::after pseudo-elements are not defined for img - you may have to use something else:
CSS Content attribute for IMG tag

此外,似乎::之前和::之后的伪元素没有为img定义 - 您可能必须使用其他东西:IMG标签的CSS内容属性

Working Example (when the image is missing): http://jsfiddle.net/DMAFm/
Another example, with the title on the <a> tag: http://jsfiddle.net/DMAFm/1/

工作示例(当图像丢失时):http://jsfiddle.net/DMAFm/另一个例子,标签上的标题:http://jsfiddle.net/DMAFm/1/

#1


1  

It should be content: attr(title);, not content: attr(data-title); - you don't have a data attribute.

它应该是内容:attr(标题);而不是内容:attr(数据标题); - 您没有数据属性。

Also, it seems ::before and ::after pseudo-elements are not defined for img - you may have to use something else:
CSS Content attribute for IMG tag

此外,似乎::之前和::之后的伪元素没有为img定义 - 您可能必须使用其他东西:IMG标签的CSS内容属性

Working Example (when the image is missing): http://jsfiddle.net/DMAFm/
Another example, with the title on the <a> tag: http://jsfiddle.net/DMAFm/1/

工作示例(当图像丢失时):http://jsfiddle.net/DMAFm/另一个例子,标签上的标题:http://jsfiddle.net/DMAFm/1/