Jump to content

How do you hide multiple DIVs when hovering over one?


simona6
Go to solution Solved by kicken,

Recommended Posts

We have been asked to setup a page with three columns.  When you hover over one, the other two disappear (opacity).

I can do it so it hides one, but not both.

So if you hover over the middle the side two disappear.  

How do you do it?

I also want to change the background image when said DIV is hoverred (bad design, but it's what they want).

.col1:hover .col2
{
    opacity: 0;
}

.col1:hover .col3
{
    opacity: 0;
}


.col2:hover ~ .col1
{
    opacity: 0!important;
}

.col2:hover ~ .col3
{
    opacity: 0!important;
}

.col3:hover ~ .col1
{
    opacity: 0!important;
}

.col3:hover ~ .col2
{
    opacity: 0!important;
}

 

Link to comment
Share on other sites

You'll probably need to use Javascript to add/remove a class which will change the opacity of the ones you want hidden.   CSS will let you select a next sibling, but not a previous sibling so there's no native CSS way to select the first and second columns when you're hovering over the third column.

A simple script like this should do the trick.

//using jQuery
const $allColumns = $('.col');
$allColumns.on('mouseover', function(e){
  $allColumns.addClass('faded');
  $(e.currentTarget).removeClass('faded');
});
$allColumns.on('mouseout', function(){
  $allColumns.removeClass('faded');
});

With markup that is like this:

<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>

<style>
  .col {
    float: left;
    height: 100px;
    margin: 0 20px;
    border: 1px solid black;
  }
  
  .faded {
    opacity: 0;
  }
</style>

If you want your columns to just fully disappear, you can use visibility: hidden; instead of opacity.  If you want to have a faded look or transition animation then you can use opacity.

Link to comment
Share on other sites

So if the columns in the Page Builder each have a Class name, and you hover Class ".col1", you cannot make col2 and col3''s opacity change in CSS?

I'm able to do Col2 and col3 if I hover over Col1.  But what it won't do, is affect any column to the left of the one you are hover.

 

Col2 hover :  Works on Col3, but not Col1.

Col3 hover : Does not work on 1 or 2.

Also, I want to change the background image of the parent DIV hovering over col1, (and 2/3) but I cannot make it do that either/

I've tried this:

.bg-row .grve-background-wrapper
{
    background-image: url("/wp-content/uploads/2022/06/filename.jpg");
    background-size: cover;
}

.col1:hover  .bg-row .grve-background-wrapper
{
    background-image: url("/wp-content/uploads/2022/11/filename2.jpg");
}

.bg-row:hover ~  .bg-row .grve-background-wrapper
{
    background-image: url("/wp-content/uploads/2022/11/filename2.jpg");
}

I just assumed you could say: col:hover ... affect Col2 and Col 3 opacity.  Simple.

Link to comment
Share on other sites

40 minutes ago, simona6 said:

Col2 hover :  Works on Col3, but not Col1.

Col3 hover : Does not work on 1 or 2.

Exactly, because as I said:

1 hour ago, kicken said:

CSS will let you select a next sibling, but not a previous sibling

There's nothing in pure CSS that lets you go back or up when selecting, only forward and down.  If you want to modify some previous element or a parent element, you usually need to get Javascript involved.

 

Depending on how you structure your layout and your columns, you might be able to accomplish what you want by watching for :hover on the parent element and styling the child columns accordingly.  For example:

 .parent:hover > .col {
     visibility: hidden;
 }
 .parent:hover > .col:hover {
   visibility: visible;
 }
  

The problem with that is if it is possible to hover over the parent element without hovering over one of the child columns, then all three will vanish.  As such, it only is really viable if you can ensure the parent is exactly the size of the three columns with no gaps between them.

Link to comment
Share on other sites

So if for example you had this:

<div class="one">hello 1</div>
<div class="two">hello 2</div>

<a class="hover">hover here</a>

You cannot hover over the <a> tag and change any design feature of "one" or "two". as the <a> tag came after it?
REALLY???

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.