How to edit a div hover using html only?

Question

I'm looking for a way to edit a div hover using only html. I need it to be html only because the code allows for an infinite number of different versions of the same div that are all different colors. I know with regular divs, you can include style="color: red" but that only lets me edit the original div. I need a code that will allow me to do so for the hover only.

TLDR: I want to be able to edit the circle:hover in html. Any help would be greatly appreciated.

CSS

.circle {
    border-radius: 32px;
    width: 25px;
    height: 25px;
    float: left;
    font-size: 20px;
    overflow: hidden;
    margin: 30px 15px 30px 15px;
    transition: height 0.5s ease;
    border: 2px solid transparent;
}

.circle:hover {
    border-radius: 32px;
    border: 2px solid #fff;
    height: 200px;
    transition: height 0.5s ease;
}

#text {
    text-align: center;
    transform: rotate(-90deg);
    margin-top: 115px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

HTML

<div class="circle" style="background: rgba(197,214,210,1); box-shadow: 
0px 0px 0px 20px rgba(197,214,210,0.4);"><div id="text">#C5D6D2</div>   
</div>

Possible duplicate of [How to write a:hover in inline CSS?](https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) — Obsidian Age, Jul 31 '19 at 23:43
Also see https://stackoverflow.com/questions/26376496/how-to-write-hover-using-inline-style. — Obsidian Age, Jul 31 '19 at 23:43

Chris · Answer 1 · 2019-08-01T21:29:11.370

0

The following code should work (put this in your css)

.circle:hover{
    background-color: red;
}

Edit: Since you don't want to use css, you can create an id for that circle and then apply it there.

edited Aug 01 '19 at 21:29

answered Aug 01 '19 at 00:34

Chris

1,206
2
15
35

Thank you for the response but I don't want to use css. CSS would make it so that every circle has a red background. I wanted to use HTML because then the user could make each circle a different color of their choosing. – Charlice Dawson Aug 01 '19 at 02:49

Lautaro Jayat · Answer 2 · 2019-08-01T04:32:26.383

It seems that you cant do a inline style for a hoover because it is a CSS pseudoelement and you only can access via Style Sheet.

What you can do is add inline javascript in order to change the styles

<div class=circle href='index.html' 
    onmouseover='this.style.color="red"' 
    onmouseout='this.style.color="black"'>
</div>

The best practice is to link a CSS StyleSheet in the section and work it from there. You can do it adding the following HTML tag:

<head>
   <link rel="stylesheet" href="ThePath/ToYour/CssFile.css">
</head>

Other option is to add a tag and write down your hover style there. In this case you will end with a HTML like This:

<head>
    <meta lots of meta data>
</head>

<body>
 <p class="circle"> this is the element yo want to style </p>
</body>

<footer>
    <style>
       .circle:hover {color: red}
    </style>
</footer>

I do not recomend you to do this, is neither the best nor for the clarity of the code, nor the SEO, etc.

Also, as it aswered word by word in this thread

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");
  head.appendChild(link);
</script>

Caution: the above assumes there is a head section.

score 0 · Answer 3 · answered Aug 01 '19 at 10:04

You can define the hover color with a custom property in the style attribute, then reference it in a :hover ruleset in the stylesheet. The same technique can clean up your background and box-shadow declarations:

.circle:hover {
  color: var(--hover-color);
}

.circle {
  background-color: rgba(var(--bg-color), 1);
  box-shadow: 0 0 0 20px rgba(var(--bg-color), 0.4);
}

/* your original CSS */

.circle {
    border-radius: 32px;
    width: 25px;
    height: 25px;
    float: left;
    font-size: 20px;
    overflow: hidden;
    margin: 30px 15px 30px 15px;
    transition: height 0.5s ease;
    border: 2px solid transparent;
}

.circle:hover {
    border-radius: 32px;
    border: 2px solid #fff;
    height: 200px;
    transition: height 0.5s ease;
}

#text {
    text-align: center;
    transform: rotate(-90deg);
    margin-top: 115px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

<div class="circle" style="--hover-color: red; --bg-color: 197, 214, 210"><div id="text">#C5D6D2</div>   
</div>

How to edit a div hover using html only?

3 Answers3