Home > Mobile >  make multiple elements hover
make multiple elements hover

Time:10-12

I have three a tags inside a div all with hrefs

.title {
    text-decoration: none !important;
    color: #000000;        
}

.title:hover{
    color: #f20d20;
}
<div>
    <a class="title" href="google.com">title 1</a>   
    <a class="title" href="google.com">title 2</a>
    <a class="title" href="google.com">title 3</a>  
</div>

I would like it so that if the user hovers over one element all of them change hover color. Im sure this is a simple problem but i cant get it to work.

CodePudding user response:

Add Hover to the parent and color to the items:

div:hover title {
  color: #f20d20;
}

CodePudding user response:

You can use div:hover

You cannot select all siblings of an element. You can select titles followed by the hover title with .title ~ .title but for previous titles no way in css.

CodePudding user response:

I think you can do this.
It's because there's no "previous sibling" selector.
So you have to use JavaScript to solve the problem.

var title = document.getElementsByClassName('title');
var i = 0;
function titleOver() {
    for (i=0;i<title.length;i  ) {
        title[i].style.color = 'red';
    }
}
function titleLeave() {
    for (i=0;i<title.length;i  ) {
        title[i].style.color = 'black';
    }
}
.title {
    text-decoration: none !important;
    color: #000000;        
}
<div>
    <a onmouseover="titleOver()" onmouseleave="titleLeave();" class="title" href="google.com">title 1</a>
    <a onmouseover="titleOver()" onmouseleave="titleLeave();" class="title" href="google.com">title 2</a>
    <a onmouseover="titleOver()" onmouseleave="titleLeave();" class="title" href="google.com">title 3</a>
</div>

CodePudding user response:

Can you please check the below code? Hope it will work for you. Here I have added display:inline-block property to the parent div so that it does not cover the entire block on hover.

div {
   display:inline-block;
}

.title {
    text-decoration: none !important;
    color: #000000;  
}

div:hover a{
    color: #f20d20;
}
<div>
    <a class="title" href="google.com">title 1</a>   
    <a class="title" href="google.com">title 2</a>
    <a class="title" href="google.com">title 3</a>  
</div>

  • Related