- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to affect other elements when one element is hovered in HTML?
To affect other elements when one element is hovered, an element should be inside another element i.e. parent-child or sibling. On placing the mouse cursor on one element, the other’s property should change i.e. the hover affect is then visible.
Change the color of another element when one element is hovered
Example
In this example, we will change the color of two boxes inside a div on mouse hover −
<!DOCTYPE html> <html> <head> <style> .parent { width: 500px; height: 150px; background-color: orange; } .child { margin-left: 39px; width: 100px; height: 40px; background-color: blue; color: white; } div { border: 3px solid red; } .parent:hover .child { background-color: green; } </style> </head> <body> <h1>Change the color</h1> <p> Keep the mouse cursor inside the orange colored div to change the color of the two blue boxes.</p> </h3> <div class="parent">In the div <div class="child"> Box1 </div> <br> <div class="child"> Box2 </div> <br> </div> </body> </html>
Change the color of a button element when the div is hovered
Example
In this example, we will change the color of a button element when the div is hovered −
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } .parent { width: 600px; height: 200px; background-color: blue; } .child { width: 30px; height: 30px; background-color: grey; } div { outline: 1px solid black; } .parent:hover .child { background-color: yellow; } .child { background-color: orange; border: none; padding: 50px 80px; margin-top: 40px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } </style> </head> <body> <h1>Change the color</h1> <p> Keep the mouse cursor inside the blue colored div to change the color of the orange box to yellow.</p> </h3> <div class="parent"> <button class="child"> Box </button> </div> </body> </html>
Advertisements