/    Sign up×
Community /Pin to ProfileBookmark

Pseudoclass :hover used in embedded style.

Copy linkTweet thisAlerts:
May 21.2009

I want to prepare some kind of Mediawiki template which will highlight (change background color) links pointed by mouse cursor. Problem is that this particular wiki installation cannot be reconfigured (no access to css sheets) because our Intranet admins usually doesn’t perform such unimportant tasks like wiki administration and doesn’t allow others to do this instead.

I know that it is possible to do such thing using javascript (onmouseover) but I prefer to use CSS [I]:hover[/I] pseudoclass.

My question is then:
[B]How I can use [I]:hover[/I] to alter background color using “style=” attribute of span tag?[/B]

I tried something like this:

[CODE]<span style=”a:hover {background: pink;}”><a href=”http://www.google.com”>Google</a></span>[/CODE]

and many other things but without success. Could someone give me a hint how to do something like this?

/Joss

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesMay 21.2009 — It can't be done with inline styles.
Copy linkTweet thisAlerts:
@JossarianauthorMay 22.2009 — It can't be done with inline styles.[/QUOTE]

I've found that this HTML specification states otherwise:

http://www.w3.org/TR/css-style-attr

I've tried this, but still without success:
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<p style="background: yellow; color: blue">Blue on yellow paragraph.</p>

<p style="{color: #090; line-height: 1.2}
::first-letter {color: #900}">Test paragraph with first-letter color effect.</p>

<a href="http://www.w3.org/Style/CSS"
style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}
">
Example of a hyperlink to the CSS home page with special one-off
visited and hover effects.
</a>
</body>
</html>
[/code]

What is wrong? Have to add some extra meta to head section?

Any ideas?

/Joss
Copy linkTweet thisAlerts:
@FangMay 22.2009 — There is a lot more in the W3C recommendations that are just not supported or partially supported.

Inline pseudo class is not supported in any browser.
×

Success!

Help @Jossarian spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...