When a user hovers over an anchor, I want every other anchor except the one being hovered on to change color. For example, if there are links link1, link2, and link3, when the user hovers over link1, I want the colors of link2 and link3 to change. The same should happen with the other links.
Check out my progress so far here on CodePen
a:hover{color:green}
#link1:hover{color: originalcolor}
#link2:hover{color: originalcolor}
#link3:hover{color: originalcolor}
To achieve this effect using jQuery, you can utilize the hover() function in the following manner:
$( "a" ).hover(
function() {
$("a").not($(this)).css("color","green");
},function(){
$("a").css("color","white");
});<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end container -->P.S For optimal viewing experience, expand the snippet to full screen.
If you want to achieve this effect using only CSS, it's definitely possible. Simply create a hover rule for the container that changes the children, and also add a separate hover state rule for the specific child you want to stand out.
ul li {
transition: background-color 200ms ease;
}
ul:hover li {
background-color: lightblue;
}
ul:hover li:hover {
background-color: yellow;
}<ul>
<li>Hello</li>
<li>World</li>
<li>Foo</li>
<li>Bar</li>
<ul>I’ve created a settings page where users can add and remove filters. To handle the deletion process, I’ve implemented this jQuery function: $('#delete-filter').click(function (e) { var filtername = $('#filter-list').val(); ...
I've searched far and wide on Google, Stack Overflow, and other sources for solutions to vertically align text within my code, but I'm struggling to make it work. My code features a form where users can input a 'doom name' and the text ...
My form originally only submitted one out of eight radio buttons to a PHP $_POST super global array, so I needed some validation. Thankfully, I received help with this code: $("#form").submit(function (event) { if(!$(":radio:checked").length) ...
I have implemented a link that, when clicked, should reveal a menu on the website. This feature is specifically optimized for smaller browser windows with a breakpoint set at 965px. However, I am encountering some varied behaviors across different browsers ...
Coming from a background in c# and c++, I am facing some confusion with a particular situation. Within the scope of my function, I am creating a new object before pushing it into an 'array'. Strangely, when I create the new object, it appears to ...
I am attempting to print a JSON object in string format. (I actually retrieved these data values from Ruby code var data = '<%=[@pro {|c| {x:c.x, y:c.y}}].to_json%>') When printing the data variable, I noticed that the values contain & ...
I am currently working on validating a time picker for a project. I found a helpful example for date validation at http://jqueryui.com/resources/demos/datepicker/date-range.html but I need to adapt it for a time picker. Specifically, I need to ensure tha ...
Hello everyone, I'm a newcomer here and I'm currently using Expo to build a react native app. My goal is to implement custom fonts in my project. I've gone through the documentation which can be found here. However, I'm facing an issue ...
https://i.sstatic.net/Twcnp.png My col-4 has overflow-y set to auto, but my dropdown gets cut off behind another col when it's open. If I change overflow-y to visible, the dropdown is no longer cut off but the max-height parameter is ignored. const ...
In my JavaFX CSS style sheet, I currently have the following code for a tag called #myText in my FXML file. This code results in a black textArea with red text, which is exactly what I want. However, I now want to make the background of the textArea tran ...
Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? " " : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...
Currently, I am working with three tables - user, modules, and an intermediate table called user_module. To perform an inner join between the user and module tables, I need to access the user_module table. "SELECT user.uName, module.moduleName FROM user_m ...
I am attempting to validate this regular expression pattern="([a-zA-Z]+[0-9]*){4,}", which essentially means: It must always start with an alphabetic character. If a number is included, there must be at least 4 characters in total; for example, aaaa would ...
After completing a cluster of four nodes using Raspberry Pi by following this tutorial from the University of Southampton, I now aim to deploy a Node.js web server application on this cluster utilizing MPI or other methods. What is the most efficient way ...
While this issue may not be considered crucial, I have observed an unexpected behavior when it comes to logging backslashes to the console. To verify the results, please try the following two examples in your terminal. I experimented with versions 0.10 an ...
I am working on a form that requires users to input up to 20 1-4 character codes. My goal is to count each code entered and present the output in the following format: AB //entered once EFOO //entered once AACC x 2 //because AACC was entered twice into fo ...
One interesting approach I am using is applying !important to all of the css properties' values like this: .someclass{ color: #f00 !important; background-color: #ff0 !important; margin: 0 !important; padding: 0 !important; width: 100% ! ...
Utilizing chart.js and ng2-charts, I am developing gauge charts for my platform to monitor the fluid levels inside a machine's tank. The values are retrieved from an external API, but I am encountering an issue where the charts are rendered before I ...
Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...
For the past two days, I've been attempting to set up apollo on an Angular application. Unfortunately, I keep encountering the following error: The package <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8b9a85868685c78b8 ...