How do you hide multiple DIVs when hovering over one?

[simona6]

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;
}

 

[kicken]

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.

[simona6]

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.

[kicken]

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.

[simona6]

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???

[kicken]

25 minutes ago, simona6 said:

REALLY???

Yes, really.

[simona6]

so in CSS, you can only affect what area you are clicking on, or what comes after.  NOT before....?
Never knew that.