How can I maintain the hover state even when the mouse is not hovering over it in CSS?

Question

How can I maintain the hover state even when the mouse is not hovering over it in CSS?

I have a lineup of 5 div boxes, and whenever you hover over one, it expands to fill the width of the screen.

The default width of the blue div is set to cover the whole screen, allowing for the application of CSS to shrink it when hovering over the other divs as it is placed last in the HTML:

#green{
    width:20px;
}
#blue{
    width:100%;
}
#green:hover{
    width:100%
}
#green:hover ~ #blue{
    width:20px;   
}

Is there a method to keep a div box expanded after it is no longer being hovered over? For instance, if the orange div was open and then the cursor moved off it without going to another colored div, could it retain its full width? Currently, when the cursor moves away, the divs revert back to blue.

Furthermore, can this be achieved without using any scripting language?

css html hover transition

Answer 1

Answer №1

Unfortunately, achieving this without JavaScript is not possible. However, here is a snippet of sample code that you may find useful:

<div id="green" onmouseover="green()">foo</div>

<div id="blue" onmouseover="blue()">more foo</div>

<div id="pink" onmouseover="pink()">even more foo</div>

And here is the accompanying script:

function green() {
    $('div').css('width','20px');
    $('#green').css('width','100%');
}

function blue() {
    $('div').css('width','20px');
    $('#blue').css('width','100%');
}

function pink() {
    $('div').css('width','20px');
    $('#pink').css('width','100%');
}

I hope this information proves helpful to you!

Answer 2

Unfortunately, achieving this without JavaScript is not possible. However, here is a snippet of sample code that you may find useful:

<div id="green" onmouseover="green()">foo</div>

<div id="blue" onmouseover="blue()">more foo</div>

<div id="pink" onmouseover="pink()">even more foo</div>

And here is the accompanying script:

function green() {
    $('div').css('width','20px');
    $('#green').css('width','100%');
}

function blue() {
    $('div').css('width','20px');
    $('#blue').css('width','100%');
}

function pink() {
    $('div').css('width','20px');
    $('#pink').css('width','100%');
}

I hope this information proves helpful to you!

Answer 3

Answer №2

Achieving this effect without a script is feasible with CSS Animations. Check out

While not as dependable as using a script, it is doable -- even maintaining it after hover, which poses the real challenge.

Answer 4

Achieving this effect without a script is feasible with CSS Animations. Check out

While not as dependable as using a script, it is doable -- even maintaining it after hover, which poses the real challenge.

How can I maintain the hover state even when the mouse is not hovering over it in CSS?

Answer №1

Answer №2

Similar questions

I prefer to prevent the page from refreshing once the PHP code is executed

What is the method to alter the color of the browse button?

Create a dynamic onClick event script and integrate it into Google Optimize

CSS transitions/transforms are failing to impact the necessary elements

The position of the scroll bar remains consistent as you navigate between different websites

What is the best way to showcase nested array JSON data in an HTML Table?

Snapping a photo from the webcam for your profile picture

"Fixing index.html with the power of Bootstrap 4: A step-by

Make sure to add CSS styles to the "ul" class first, followed by

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

Transforming a two-digit year into a four-digit year

The multiple-choice selection tool is not displaying any choices

Are there any alternatives similar to the reverse sr-only feature in Bootstrap 4?

Having trouble implementing responsive image with fixed aspect ratio code

Struggling to concentrate on a text field following navigation in an AngularJS application

Style Guide for optimum class arrangement in Bootstrap framework

Basic email subscriber form using PHP and HTML

Difficulty aligning headings in HTML

HTML page with a Bootstrap video banner displaying incorrectly

Navigational Menu in PHP