Hover Property in CSS Doesn't Work When I Have an Inline Styles

How to 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?

background-color property not working with hover selector

Because you're using inline style background color. You can't override it without using !important. Learn CSS Specificity

#inst {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  border: 2px solid #000;
  background-color: #fff;
  text-align: center;
}

#inst button {
  font-size: 45px;
  width: 400px;
  border: 2px solid #000;
  margin: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#inst button:hover {
  font-weight: bold;
  background-color: red !important;
}

<div id="inst">
  <h1>Login or Signup</h1>
  <p>
    Please login or sign up to continue...
    <br>
    <button onclick="window.location.href='/Server/login.php?redirect=<?= $uri ?>'" style="background-color: black; color: white;">Login</button>
    <br>
    <button onclick="window.location.href='/Server/signup.php?redirect=<?= $uri ?>'" style="background-color: white; color: black;">Sign Up</button>
  </p>
</div>

CSS hover not overwriting REACT state inline props

The reason is not the react or state, this comes basically from css and how it calculates specificity of css rules. Inline styles always are stronger than regular css by selector, so only way to overwrite it - use !important.

  z-index: 99 !important; 

You may check this article if you are interested of how it works: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Here is a simple example for it:
https://codesandbox.io/s/epic-cherry-xvg6w?file=/src/App.js

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

CSS Hover-Effect isn't working in Firefox because of display: inline;

It shouldn't make a difference if you set #nav li also to display: inline-block;

After changing css, hover doesn't work

You haven't defined what you mean by "hover", but if you're talking about CSS :hover, then it's because inline styles (as set by .css() override stylesheet styles.

You can add !important to your CSS definition to override the inline.

.bar:hover {
    color: #ABCDEF !important;
}

I don't believe this works with older IE though.

DEMO: http://jsfiddle.net/hh4NJ/1/

---

Another (and arguably better) solution would be to use .addClass() instead of .css() to change the style. Then you can take care of all of it in your CSS (except for adding/removing the class of course).

$('.bar').addClass('whiteColor');

.whiteColor {
    color:#fff;
}

DEMO: http://jsfiddle.net/hh4NJ/2/

---

Regarding your update, you can't use pseudo selectors like :hover for DOM selection.

How do I make :hover inside div style?

You can't have pseudo selectors within inline styles.

You'll need to use CSS in an external stylesheet (<link rel="stylesheet" href="style.css" />) or use a <style> element.

---

Related Topics