CODEWITHSUNDEEP
javascripthtmlcss
Nameless
Nameless

Reputation: 403

How to get rid of a class within <a> tag when other <a> tag is being hovered

Code:

<!DOCTYPE>
<html>
<style>

.topnav {
background-color: white;
}

.topnav a {
color: black;
padding: 14px 16px;
font-size: 17px;
}

.topnav a:hover {
background-color: blue;
color: white;
}

.topnav a.active {
background-color: blue;
color: white;
}

<body>
<div id = 'menu' class = 'topnav'>
<a id = 'inactivate' class = 'active' href = 'first'>First</a>
<a href = 'second'>Second</a>
<a href = 'third'>Third</a>
<a href = 'fourth'>Fourth</a>
</div>
</body>
</style>
</html>

What it does:

It creates a navegation bar, topnav, which consists of three hyperlinks: first, second, third and fourth. By default, each hyperlink has a black font and has a white background, except for first, who has a white font and a blue background.

Goal

When the user hovers over a hyperlink which is not first, it makes the hovered hyperlink have a white font and a blue background, then it sets first to a black font and white background.

What I've tried: I coded a script using JavaScript

<script>
var element = document.getElementById('inactivate');
element.classList.remove('active');
</script>

I placed the script in

<!DOCTYPE>
<html>
<style>

.topnav a:hover {
---
script
---
}

</style>
</html>

However, it didn't work. The script works, though. I just don't know how to make the script run when a hyperlink is hovered.

Upvotes: 0

Views: 157

Answers (3)

Lawrence Cherone
Lawrence Cherone

Reputation: 46620

When the user hovers over a hyperlink which is not first, it makes the hovered hyperlink have a white font and a blue background, then it sets first to a black font and white background.

Can be achieved without javascript, with .topnav:hover a.active:not(:hover),

.topnav:hover a.active:not(:hover),
.topnav a {
  color: black;
  padding: 14px 16px;
  font-size: 17px;
  background-color: white;
}

.topnav a:hover,
.topnav a.active {
  background-color: blue;
  color: white;
}
<div class="topnav">
  <a class="active" href="#">First</a>
  <a href="#">Second</a>
  <a href="#">Third</a>
  <a href="#">Fourth</a>
</div>

Upvotes: 2

nullcoder
nullcoder

Reputation: 183

Not that hard, use JQuery! Here, I made a simple example here

$(document).ready(function() {
    $("nav a").hover(function() {
        $("nav a").removeClass("active");
        
        $(this).addClass("active");
    });
    
    $("nav a").mouseout(function() {
        $("nav a").removeClass("active");
        $(".first").addClass("active");
    });
});
a {
    color: #000;
    font-family: sans-serif;
    background: #fff;
    transition-duration: 300ms;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 3px;
}

a.active {
    background: blue;
    color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
    <a href="#" class="first active">First</a>
    <a href="#">Second</a>
    <a href="#">Third</a>
    <a href="#">Fourth</a>
</nav>

Upvotes: 0

Nick
Nick

Reputation: 16586

The following adds an event listener to the #menu div and uses event bubbling to capture mouseover events. Then, it only logs "do thing" when the target's tagName is A (i.e., it's a link) and the target's id isn't "inactivate" since you don't want the hover effect on the first link.

In the following code, you can swap out what you actually want to execute where I have the console.log.

const menu = document.querySelector("#menu");

menu.addEventListener("mouseover", (e) => {
  if (e.target.tagName === "A" && e.target.id !== "inactivate") {
    console.log("do thing");
  }
})
<div id = 'menu' class = 'topnav'>
  <a id = 'inactivate' class = 'active' href = 'first'>First</a>
  <a href='second'>Second</a>
  <a href='third'>Third</a>
  <a href='fourth'>Fourth</a>
</div>

Upvotes: 2

Related Questions