Question

This is my HTML code, but I want to try to change the value of "title" in CSS. Is that possible?

I tried some ways, and the following CSS doesn't work also...How can I figure out?

.icon {
  content: attr("A new title");
}

<a class="icon" href="https://www.youtube.com" target="_blank" title="View Youtube">LINK</a>

Answer 1

您无法更改它，但您可以使用css进行破解。请检查以下代码。

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: 'sadasdsad';
  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);
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" title="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" title="This is another link">Mauris placerat</a> eleifend leo.</p>

Answer 2

我不认为它可以通过CSS来完成。但是如果你可以使用JQuery。它可以很容易地完成。

使用jQuery检查我的解决方案。

<强> JSFiddle

$('.icon').prop('title', 'your new title');

希望得到这个帮助。

Answer 3

你试过这个解决方案吗？

.icon{
    title: "new title";
}

是否可以更改<a> element in CSS?

3 个答案: