change CSS class content using jQuery

Asked Jun 04 '17 at 23:17

Active Jun 04 '17 at 23:17

Viewed 54 times

I have links that, on hover, will display "bar" after.

.link
{
   color:aqua;
   text-decoration: none;
   background-color: none;
}

.link:hover span {display:none;}
.link:hover::after {content: attr(data-content) 'bar';}

My objective is, on document load, to attach "foo" to in front of "bar" in the content. I have referred to this previous question for help, but cannot seem to find a solution. This did not work:

$(document).ready(function($){
     $('.link').attr('data-content','foo');
 });

Any suggestions on what is going wrong would be highly appreciated. How can I change the content of .link on document load?

asked Jun 04 '17 at 23:17

iskandarblue

7,208
15
60
130

what's in `data-content`? can you post the html, too? – Michael Coker Jun 04 '17 at 23:19
2

Set up a jsfiddle with your question. At face value, your jQuery doesn't appear to be the issue, I'm guessing the CSS is, or the relationship between how CSS reads the `attr` and load time. This is clearly solveable, but may require a more jQuery-focused approach vs the CSS approach to reading the content. – random_user_name Jun 04 '17 at 23:20
Seems to work just fine: https://jsfiddle.net/6tt6k2L1/ – Gabriele Petrioli Jun 04 '17 at 23:24
nothing is in `data-content`, it is an attribute that is created in the jQuery function – iskandarblue Jun 04 '17 at 23:25
is that what u asking for https://jsfiddle.net/mouner/4h96mcy3/ – Mouner Mostafa Jun 04 '17 at 23:29
yes but it's not working for me – iskandarblue Jun 04 '17 at 23:42
could u paste full page code in ur question – Mouner Mostafa Jun 04 '17 at 23:51

change CSS class content using jQuery

0 Answers0