Inline Style to Act as: Hover in CSS

How can I write 'a:hover' in inline CSS?

Short answer: you can't.

Long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style.

:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).

Response to the OP's comments:

See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.

Also, don't forget, you can add links to external stylesheets if that's an option. For example,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Caution: the above assumes there is a head section.

Inline style to act as :hover in CSS

I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.

I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it

Edit: I just did a quick test with this:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?

How to give hover effect in inline html?

Correct way to do it (in my opinion)

Use css with selector p.skill:hover.

For example:

p.skill:hover {
    background-color: yellow;
}

Source https://www.w3schools.com/cssref/sel_hover.asp

The way you want to do...
Use javascript

<p class="skill" onmouseover="this.style='background-color:#20b920;';" onmouseout="this.style='background-color:white';">Node.js</p>

Don't forget to change "white" to color of parent element background.

Inline CSS styles in React: how to implement a:hover?

I'm in the same situation. Really like the pattern of keeping the styling in the components but the hover states seems like the last hurdle.

What I did was writing a mixin that you can add to your component that needs hover states.
This mixin will add a new hovered property to the state of your component. It will be set to true if the user hovers over the main DOM node of the component and sets it back to false if the users leaves the element.

Now in your component render function you can do something like:

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

Now each time the state of the hovered state changes the component will rerender.

I've also create a sandbox repo for this that I use to test some of these patterns myself. Check it out if you want to see an example of my implementation.

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin

Using :hover for an element's inline style (using HTML/CSS/php)

This will help you if javascript is appreciable

<TD onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
<A HREF="http://www.mysite.com">Click Here</A></TD>

or

Javascript Change Hyperlink Text Color Onmouseover

<style type="text/css">

a {
font-weight:bold;
font-family:verdana;
text-decoration:none;
}

</style>

<script type="text/javascript" language="javascript">
function changeColor(idObj,colorObj)
{
    document.getElementById(idObj.id).style.color = colorObj;
}
</script>

<a href="#" style="color: #000000" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#000000'">
    Link 1</a>
<br />
<br />
<a href="#" style="color: #999999" onmouseover="this.style.color='#008000'" onmouseout="this.style.color='#999999'">
    Link 2</a>
<br />
<br />
<a href="#" style="color: #FF0000" onmouseover="this.style.color='blue'" onmouseout="this.style.color='#FF0000'">
    Link 3</a>
<br />
<br />
<a id="lnk1" href="#" style="color: #008000" onmouseover="changeColor(this,'#FF0000');"
    onmouseout="changeColor(this,'#008000');">Link Color change using javascript function</a>

How to write :hover using inline style?

Not gonna happen with CSS only

Inline javascript

<a href='index.html' 
    onmouseover='this.style.textDecoration="none"' 
    onmouseout='this.style.textDecoration="underline"'>
    Click Me
</a>

---

In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:

<a href="http://www.w3.org/Style/CSS"
   style="{color: blue; background: white}  /* a+=0 b+=0 c+=0 */
      :visited {color: green}           /* a+=0 b+=1 c+=0 */
      :hover {background: yellow}       /* a+=0 b+=1 c+=0 */
      :visited:hover {color: purple}    /* a+=0 b+=2 c+=0 */
     ">
</a>

but it was never implemented in the release of the spec as far as I know.

http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules

Why an inline style for an element cancels a `:hover` for the same?

You are right the but if need to make the color change while hovering the text you must do like this(just Added The Important Tag):

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow !important;
}

<a href="/" style="color: tomato">Home</a>

Is there a way to change css on hover with (style=)?

Pseudo classes are not allowed to use as inline CSS, so the short answer is NO, you cannot do what you are trying to achieve.

Consider using <style> tags at document level, or you can use JavaScript if you want to..

<a href="#" onmouseover = "this.style.color = '#000'" 
            onmouseout  = "this.style.color = '#f00'">Hi</a>

Demo

And as you commented, still the answer is no, even using HTML5/CSS3 there's no way you can use pseudo classes inline.

How to make an HTML anchor tag bolder on hover without css, only changing the inline style?

You can't do it with inline CSS. You have to use normal <style> tag or a separate sheet:

a {
    font-weight: normal;
}

a:hover {
    font-weight: bold;
}

I strongly recommend that you try to do it with CSS, but if you must do it with JS, here's a solution:

<a href="https://en.wikipedia.org/wiki/Internet_of_Things" onmouseover="this.style.fontWeight='bold'" onmouseout="this.style.fontWeight='normal'" target="_blank" ">Internet of things<br></a>

Here's a fiddle:

http://jsfiddle.net/72ehppr1/

CSS a:hover inline?

That's completely impossible; sorry.

Instead, you can create a CSS class for each color and apply the appropriate class to each link:

#menu a.red:hover { background: red; }

---

Related Topics