You can find the website is more interactive when you move your cursor over an element. The other elements can be affected when one element is hovered. Hovering can be suitable for menus, tooltips, or image galleries. You can hover using CSS, JavaScript, and jQuery. We will discuss these methods in this blog.
Table of Contents:
Methods to Affect Other Elements When One Element is Hovered
You can use CSS, JavaScript, and jQuery to hover elements. Let us discuss these methods below.
Method 1: Using the Sibling Selector (~) in CSS
You can hover an element like .container, the sibling selector targets all the sibling elements. The .box changes its appearance and leaves other elements in the starting left unaffected.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Sibling Selector</title>
<style>
.container:hover ~ .box {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="container">Hover me</div>
<div class="box">Affected Element</div>
</body>
</html>
Output:
Explanation: You can use this code to change the second box’s background to blue and its text color to white by hovering over .container.
Method 2: Using the Adjacent Sibling Selector (+) in CSS
You can hover over an element, like .container, and the adjacent sibling selector (+) targets only the first .box that comes immediately after it, changing its appearance while leaving all other .box elements unaffected.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent Sibling Selector</title>
<style>
.container:hover + .box {
background-color: green;
}
</style>
</head>
<body>
<div class="container">Hover me</div>
<div class="box">Affected Element</div>
</body>
</html>
Output:
Explanation: You can use this code to change the second box’s background to green by hovering over .container and its text color remains the same.
Method 3: Using the Parent Selector in CSS
You can hover over a parent element, like .parent, and its child element, such as .child, gets affected.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Selector</title>
<style>
.parent:hover .child {
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
Hover over me
<div class="child">Affected Element</div>
</div>
</body>
</html>
Output:
Explanation: You can use this code to change the second box’s background to red by hovering over the parent element and its text color remains the same.
Method 4: Using JavaScript
You can hover over an element, like .container. You can use JavaScript to change the style of the .box. And resets it when the hover is removed.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Hover Effect</title>
<style>
.box {
background-color: lightgray;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">Hover me</div>
<div class="box">Affected Element</div>
<script>
document.querySelector(".container").addEventListener("mouseover", function() {
document.querySelector(".box").style.backgroundColor = "purple";
});
document.querySelector(".container").addEventListener("mouseout", function() {
document.querySelector(".box").style.backgroundColor = "";
});
</script>
</body>
</html>
Output:
Explanation: You can use this code to change the second box’s background to purple by hovering over the .container and its text color remains the same.
Method 5: Using jQuery
You can use jQuery, to add hover effects using the hover() function. It changes the background color of .container when you hover over it and you can reset it when your mouse moves away.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Hover Effect</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
background-color: lightgray;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">Hover me</div>
<div class="box">Affected Element</div>
<script>
$(".container").hover(
function() {
$(".box").css("background-color", "yellow");
},
function() {
$(".box").css("background-color", "");
}
);
</script>
</body>
</html>
Output:
Explanation: You can use this code to hover over the .container, hover() function in jQuery to change the second box background color to yellow.
Conclusion
You can use CSS, JavaScript, and jQuery to hover the other elements when any element is hovered. Using CSS you can target the sibling selector and in jQuery, you can use the hover() function to affect the other elements with hovering properties. Affecting other elements when one has hovered can enhance the user experience by creating visually appealing and interactive designs.
How to Affect Other Elements When One Element is Hovered? – FAQs
1. What is the CSS selector to affect other elements on hover?
You can use the ~ the general sibling selector and + adjacent sibling selector. Therefore you can target the element that is a sibling of the hovered element.
2. Can I target a parent element on hover?
No, CSS does not allow selecting parent elements directly. You can only target the child or sibling element.
3. How can JavaScript or jQuery help in hover effects?
You can use JavaScript or jQuery, to listen for hover events and programmatically apply styles or effects to any element.
4. Can hover effects be applied to multiple elements?
Yes, using CSS selectors or JavaScript, you can target and apply hover effects to multiple elements at once.
5. Do hover effects work on touch devices?
Hover effects are less reliable on touch devices since there is no “hover” concept.