Specialized hover mission

Do you have a question? Imagine you have 3 spans where the default color is black. When you hover over a span, its color changes to red. But what if I told you that at the start, the first span has an orange color. Now, I want to hover over the orange one and have it turn red, then go back to black when I move away, just like the default. And on the second hover, it should behave like the other spans (red when hovered over, black when not). Is it possible to achieve this effect using only CSS?

<span class="class1">blabla</span>
<span class="class2">blabla</span>
<span class="class3">blabla</span>

.class1 {color: orange;}
span:hover {color: red;}

Answer №1

One way to accomplish this is by using jQuery:

$(".class1").mouseleave(function(){
  $(this).removeClass("class1");
})

Another option:

$(":not('.class1')").mouseover(function(){
  $('.class1').removeClass("class1");
})

View the code in action here

Answer №2

var colors = document.getElementsByClassName('rainbow-hover');
for (var x = colors.length; x--;) {
  let colorArray = ['green', 'red', 'blue', 'orange'];
  colors[x].onmouseover = function() {
    if (!colorArray.length) colorArray = ['green', 'red', 'blue', 'orange'];
    this.style.color = colorArray.shift();
  }
}
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span><span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>

Answer №3

Learning Web Technologies

<div class="box1" id="firstbox">content1</div>
<div class="box2">content2</div>
<div class="box3">content3</div>

Cascading Style Sheets (CSS)

.box1{
 background-color: #3498db;
}

div:hover{
 background-color: #e74c3c;
}

JavaScript

var firstBox = document.getElementById("firstbox");

firstBox.onmouseover = function() {
 firstBox.style.backgroundColor = "#e74c3c";
};

firstBox.onmouseout = function() {
 firstBox.style.backgroundColor = "#ffffff";
};

Link to corresponding JSFiddle demo: http://jsfiddle.net/UniqueUser/demo123/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to trigger a function with ng-click in my AngularJS directive?

I am struggling to understand how to invoke a function from my directive using ng-click. Here is an example of my HTML: <div> <directive-name data="example"> <button class=btn btn-primary type="submit" ng-click="search()"> ...

Div failing to expand to fit its contents

I'm having trouble getting my info-container div to adjust its height based on its contents. I suspect that the floating div within it might be causing the issue, but I'm not certain. I've included a link to jsfiddle where you can view the C ...

Ascending with Progress Indicator Slider

After successfully creating a Bootstrap 5 Carousel with an automated count for each slide (limited to 4) and a corresponding progress bar, I encountered an issue with getting the previous button to function correctly. While clicking the next button works s ...

Exploring the Power of Angular Toastr Callback Functions

Hey there! I'm currently working with Angular Toastr to display messages on my screen. I have a setup where only two messages can be open at the same time - one for errors and another for warnings. These messages are persistent and require user intera ...

Add a new module to your project without having to rely on the initial

I'm looking to experiment with a module by making some adjustments for testing purposes. You can find the code here. Currently, all I need to do is type "npm install angular2-grid" in my terminal to add it to my project. Here's my concern: If ...

My HTML loop is functioning properly with a variable, however, it is not working as expected

Hi there! Here is a piece of code that includes a loop with a timer. I am trying to change a variable using a button, however, it's not working as expected. <!doctype html> <html> <body> <script> var timer = 1000; var counter ...

What is the proper technique for inserting a variable into the header portion of a v-data-table from a JavaScript file?

I'm currently developing an application using Vue.js with datatables. I need to display the headers of a v-data-table component, and ideally, I would like to pass a variable that can be dynamic based on the language selected on the page. Below is the ...

When the `back` button is clicked in a browser from a different domain, does it trigger a page reload?

Imagine a scenario where a user accesses mydomain.com. At this point, the history stack contains only one entry. Then, the user clicks on a link within my website that leads to mydomain.com/cool, causing another state to be pushed onto the stack. Now, with ...

Aligning the 'container-fluid' slideshow and video player

I'm struggling to center a video in a slick slider that is set as a 'container-fluid'. The slideshow and video display fine across the full width of the browser, but when I resize the browser window or view the site on a lower resolution, I ...

A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this. As a result, the appearance is as expected and behaves normally. Check out the JSFiddle Example C ...

Creating duplicates of a parent mesh in THREE.js with its children and additional materials

I am inquiring about a cloning issue I am having with a mesh that has a parent and 4 children, each with different materials. When I clone the parent mesh using this code: let result = cloudObjects.sideCloudGeometry[texture].clone(); The cloned mesh look ...

Perform actions while HTML5 video is in progress

I've been attempting to trigger a simple function when an HTML5 video hits a specific second mark, but so far I haven't had any success. I'm reaching out for assistance and guidance. Below is the code I have been working with: jQuery(functi ...

The Javascript function is triggered only upon the second click

My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...

Grouping various event listeners within a v-for loop

My Desired Outcome In my Vue component, I am displaying a list of actions using v-for. Each action should have a corresponding @click event handler that triggers the action method within the component. I need help declaring these actions in my data() fun ...

Transferring HTML information to Flask

I'm struggling with passing a value from a text box in a web application to a Flask application. Despite my efforts, the request object in Flask does not seem to contain the data I need. Can anyone provide assistance with this issue? Below are the rel ...

Retrieve JSON data and use a button to sort and display markers on a Google Map

Is it possible to modify my function in order to use different PHP files with separate buttons without duplicating the code? Currently, I have a function that displays markers on an external HTML page when a button is clicked. The data is retrieved from fi ...

When attempting to execute a query in Node using oracledb, an error with the code 'npm ERR! errno 3221225477' occurred

Encountered the following error message in the command line: npm ERR! code ELIFECYCLE npm ERR! errno 3221225477 npm ERR! [email protected] start: `node ./bin/www` npm ERR! Exit status 3221225477 npm ERR! npm ERR! Failed at the [email protected] start sc ...

Using Vuex's v-model to bind to a state field in an object

In my current Vuex state, I have defined a getter named configs, which looks like this: configs: { 1303401: { exampleValue: 'test' } } There is also an input where I bind the exampleValue from the Vuex store's state using v-mo ...

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

In a unique case I'm dealing with, certain validation logic needs to occur in the UI for specific business reasons[...]. The array could potentially contain anywhere from several tens to hundreds of thousands of items (1-400K). This frontend operation ...