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>