1

I can set the text of a span with this css.

.tracking-true .tracking-button-text:before
{
    content:"Tracking";
}

But I would like to change the text on hover Something like this but I can't get it to work.

.tracking-true .tracking-button-text:hover
{
    content:"Untrack";
}

Can this be done in css?

Update: Much like Stackoverflow uses :hover to change the cursor to a pointer or change a background color as a ui hint I am trying to convey to the user the same thing. This element can be clicked on and something will happen. I don't feel this is an innaporopriate use of CSS.

etoisarobot
  • 7,684
  • 15
  • 54
  • 83
  • 2
    I would have to ask "why do you want to do this?". CSS should be used to styling the content, not for actual content :P Also, along the same lines as what @AarolamaBluenk said, you can do this with JavaScript, not necessarily jQuery. – Amy Mar 08 '13 at 21:41
  • I'm with @sweetamylase Css is for styling, don't use it to create functionality.... you will just get yourself into a world of trouble. and make a mess for whoever comes after you. – Ryan Mar 08 '13 at 21:43
  • "The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element." - https://developer.mozilla.org/en-US/docs/CSS/content - this is the only context in which the property can be used. – pwdst Mar 09 '13 at 10:45

1 Answers1

3

Do this:

.tracking-true .tracking-button-text:before
{
    content:"Tracking";
}

.tracking-true .tracking-button-text:hover:before
{
    content:"Untrack";
}
Daniel Williams
  • 8,673
  • 4
  • 36
  • 47
  • Should discourage the use of CSS for anything that's not styling. :( – Amy Mar 08 '13 at 21:45
  • 2
    Discouraging is a different topic. He wants an answer here it is. You are not contributing. – Daniel Williams Mar 08 '13 at 21:46
  • It may work, but it's an abuse of the `content` property in CSS. And I'm sure it's ompletely frowned upon in the web community. – Amy Mar 08 '13 at 21:46
  • StackOverflow is a place where people can learn and improve. If someone is going down the wrong path, it would be best to point them toward the right direction. – Amy Mar 08 '13 at 21:48
  • At least add to your answer and warn people that they shouldn't be doing this with their CSS. – Amy Mar 08 '13 at 21:50
  • Please read http://stackoverflow.com/questions/how-to-answer and http://stackoverflow.com/privileges/vote-down. Downvoting for what you think is not a "proper guideline" is not along the lines of what should be downvoted. – Daniel Williams Mar 08 '13 at 21:51
  • I have read it. Your answer isn't complete, and people might come along and think it's ok to do what you wrote. Also, it's not just "my guideline", see http://stackoverflow.com/questions/2435513/what-are-good-uses-of-css-content-property – Amy Mar 08 '13 at 21:55
  • Your measure of "ok" is subjective and highly open to debate. You can find about a million articles of people saying content is good or bad and when to use it or not. This is not the place to preach dogma. Please read the answers to the question you linked. It is an open discussion. – Daniel Williams Mar 08 '13 at 21:56
  • Not saying it has to be explicitly written and declared to be "OK". But generally, other fellow web developers would appreciate it if people don't abuse CSS. It's for the common good. – Amy Mar 08 '13 at 21:59
  • "For the common good" has no relevance here. This site is not intended to be a soap box. It is for questions and answers. – Daniel Williams Mar 08 '13 at 22:00
  • Someday when you have to work on a site that someone else has built, and they use their CSS in ways that you don't expect, you'll realize why people try to push others to use CSS properly and appropriately. – Amy Mar 08 '13 at 22:04
  • 5
    In this application, the words "Tracking" and "Untrack" are functional descriptors, and do not constitute content. This use is more like roll-over-images, a visual indicator of something-to-do or something-is-happening; I would say this is a user interface design/styling issue so using CSS is okay. – Marc Audet Mar 08 '13 at 22:06
  • Although I'm not generally comfortable with changing content using CSS, I've upvoted this one because a) it correctly answers the question as given and crucially b) the content being changed or inserted appear to be UI hints rather than actual page context as Marc states. – pwdst Mar 09 '13 at 10:52