When I hover over an HTML element I would like that element to inherit the properties of a pre-written CSS class.
Is there a way to accomplish this task without Javascript?
5
-
2Please include the code that you've tried in your question.Mech– Mech2020-09-23 19:34:59 +00:00Commented Sep 23, 2020 at 19:34
-
@Mech normally I agree. However, for this question I thought it was clearer without the code. How could the addition of non functioning code help here?Alex Fine– Alex Fine2020-09-23 19:39:11 +00:00Commented Sep 23, 2020 at 19:39
-
StackOverflow is meant to help you learn where you went wrong and how to fix it :)Mech– Mech2020-09-23 19:43:35 +00:00Commented Sep 23, 2020 at 19:43
-
True – but what about situations where the path forward is rather opaque? Or in this case requires functionality that apparently doesn't exist in CSS. Surely every good question doesn't need associated codeAlex Fine– Alex Fine2020-09-23 19:47:04 +00:00Commented Sep 23, 2020 at 19:47
-
Still best to give your best attempt :)Mech– Mech2020-09-23 20:50:29 +00:00Commented Sep 23, 2020 at 20:50
Add a comment
|
4 Answers
Write a hover class for an item, which does the exact same thing that you are describing.
.box{
height: 60px;
width: 60px;
border: 1px solid black;
margin: 20px;
}
.box1:hover, .box2{
background-color: red;
}<div class="box box1"></div>
<div class="box box2"></div>More simply:
.box{
height: 60px;
width: 60px;
border: 1px solid black;
margin: 20px;
}
.box:hover{
background-color: red;
} <div class="box"></div>In your CSS file, write a hover selector for the element you are targeting:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
Creating the :hover selector will inherit the properties associated when the mouse hovers over the selected element.
<div>
<a href="#">Example 1</a>
</div>
Hope that answers your question!
Comments
Hover Me
Hover Me
That would add / remove the class name with javascript, otherwise do this in CSS:
div:hover { background-color: red }
Comments
<div mouseover="this.className='myClass'" onmouseout="this.className=''">
Hover Me
</div>
That would add / remove the class name with javascript, otherwise do this in CSS:
div:hover {
background-color: red
}
1 Comment
Libra
He specified in the question that it should be done without javascript, also writing a script to accomplish something built into css is asinine. Furthermore, this code would wipe all existing classes, not just the one added on hover.