Hover on anchor and change style of completely separate element

So here’s some basic code for what I’ve got on this template:

<div class="mugshot">
    <a href="#">
        <img src="/avatar-7.jpg" alt="pic" />
    </a>
</div>

<div class="username">
    <a href="#">username</a>
    <br />
    <span class="follower-count">545 Followers</span>
</div>

Here’s the result on page: https://imgur.com/a/Y3rQKxr

I have CSS for the mugshot that sets the opacity to .8 and then on hover it’s set to 1.

.mugshot {
    opacity: .8;
}
.mugshot:hover {
    opacity: 1;
}

What I’d like to have happen is that when someone hovers over the username of the user, the opacity of the mugshot is also set to 1 which would make it have the hover effect too not only when the mugshot was hovered, but the link was hovered as well. I’m pretty sure I’ve done this in the past, but I can’t seem to get it working. Here’s what I thought I needed which of course isn’t working:

.username a:hover .profile-pic {
    opacity: 1;
}

Is this not possible?

Hi,
If I understand you right your asking if you can hover on an anchor of one div (username) and have it change styles of the mugshot anchor in the other div.

No, CSS can’t climb up the document tree like that.

Now if things were re-worked and the anchors were siblings that would work.

If the anchors were siblings you can target the hover styles from hovering on the parent.

<div class="username mugshot">
    <a href="#">username</a>
    <span class="follower-count">545 Followers</span>
    <a href="#">
        <img src="/avatar-7.jpg" alt="pic" />
    </a>
</div>

Now with your HTML set up like that you can target your hover styles from the parent. You could even style the child elements to look like the image you linked to. Your just omitting an extra wrapping div.

2 Likes

You can do this by moving the username div into the outer mugshot div like this:

<div id="wrap">
	<div class="mugshot">
		<img src="mugshot.jpg">
		<div class="username">
			username</div>
	</div>
	<div class="follower-count">
		545 Followers</div>
</div>

You also need to make a small change to the CSS like this:

#wrap {
	width: 500px;
	height: 500px;
	margin: 20px;
}
.mugshot {
	opacity: .8;
	cursor: pointer;
}
.mugshot:hover {
	opacity: 1;
}
.username {
	margin-top: 10px;
	cursor: pointer;	
}
3 Likes

It looks like username content for a forum, I think he will need to keep the anchors for linking to the user’s page. At least one anchor anyway.

I was also going to suggest keeping the original html and just wrapping both divs in a new parent div. Not sure if that will work with the rest of the page though, it should.

More than likely there is some JS tied to it that updates the follower count. That may have to be reworked too if the html changes.

3 Likes

Hi @Ray.H Just out of curosity, what would the CSS syntax look like when just using the anchor to tricker the other div. I know how this can be done by targeting .mugshot as sibling from .username:

<div class="wrap">
    <div class="username">
		<a href="#">Username</a>
		<span>545 Followers</span>
	</div>
    <div class="mugshot">
		<img src="/avatar-7.jpg" alt="pic" />
	</div>
</div>

CSS

.wrap { 
	width: 400px;
    height: 200; // For test
    margin: auto;
	display: flex; 
	background-color: RGB(255, 255, 255);
}

.wrap > div {
    width: 50%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

 .mugshot {
     opacity: .8 
 }

.username { 
    order: 1; 
} 

.username span {
    display: block;
}

.username:hover + .mugshot { 
    opacity: 1;
}

I tried it with a anchor as well but without success.

Your code just needed a few adjustments

Edit: That anchor can be placed back in the mugshot div too so the pic is a link too (as the OP’s code shows it)

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.wrap {
  width: 300px;
  margin: auto;
  display: flex;
  background: #eee;
  align-items: center;
}
.wrap > div {
  text-align: center;
  cursor: pointer;
  outline: 1px solid red;
}
.mugshot {
  width:100px;
  opacity: .8
}
.mugshot img {
  display:block;
  width:100px;
  height:100px;
  background:#bbb;
}
.username {
  width:200px;
  order: 1;
}
.username span {
  display: block;
}
.mugshot:hover,
.username:hover + .mugshot {
  opacity: 1;
}

</style>

</head>
<body>

<div class="wrap">
  <div class="username">
    <a href="#">Username</a>
    <span>545 Followers</span>
  </div>
  <div class="mugshot">
    <a href="#">
      <img src="/avatar-7.jpg" alt="pic" />
    </a>
  </div>
</div>

</body>
</html>
2 Likes

Hi donboe, Sorry I missed that part about… “just using the anchor

That would put us back in the same boat, having to climb out of the parent to reach the child of another parent.

You could use the anchors as direct children of one parent but it is no different than what you have now, except your hover styles would be hooked to the anchors.

2 Likes

Hi Ray.H. Thanks for the response. And how would that look like?

I have been climbing all afternoon :wink: There is just one parent, or are you reffering to the siblings .username and .mugshot

I was referring to the siblings .username and .mugshot , they are the parent’s of the anchors.

Using the code from post #5 you could just move the class names to the anchors themselves so they become siblings. It just removes them from the parent divs they were in.

Now the anchors are siblings

<div class="wrap">
    <a class="username" href="#">
      Username
      <span>545 Followers</span>
    </a>
    <a class="mugshot" href="#">
      <img src="/avatar-7.jpg" alt="pic" />
    </a>
</div>

Then you would only change .wrap > div to .wrap > a

.wrap > a {
  text-align: center;
  cursor: pointer;
  outline: 1px solid red;
}
1 Like

Thanks again @Ray.H. So without the inner divs. I really wonderd how that worked, but this makes sense. Thanks a lot :+1:

Edit: Sorry that I have to come back to this one last time. But now it is basically the same as in post #5, with the difference that the divs are now anchors. Where OP requested to use just the username to trigger the opacity effect! on .mugshot

That’s where you misread to OP’s original post.

Here’s what was said…

Now whether any of this will work is yet to be known until we hear back from deron.

What I don’t like about the anchors only is the follower count span being nested in the anchor. That could be moved out so it is not effected by the anchor styles. It could be moved to the bottom of the source so the anchors are still direct siblings.

Like I mentioned , I’m sure there is some JS tied to it that updates the count too.

1 Like

@Ray.H. That is what I ment, but since in the original post the anchor was a child of .username

I thought that he ment when hovering the anchor within that div

Your right. Lets wait for Deron

Here’s another stab at it using grid layout

3 Likes

Nice one @Ray.H :+1:

…and just for fun a two way hover :slight_smile:

3 Likes

Thanks for the replies, everyone. Apologies for my delayed response.

Both @Ray.H and @PaulOB solutions seemed to work well. Thanks to you both!

I did come up with a solution that seems to work in addition to the two you gave although admittedly I didn’t test it in a lot of different browsers but seems to do what I need in Chrome:


.submitter-info {
    position: relative;
    a,
    .followers {
        display: block;
        margin-left: 4rem;
    }
    a img {
        opacity: .8;
    }
    a:hover img {
        opacity: 1;
    }
    img {
        border-radius: 50px;
        width: 50px;
        vertical-align: baseline;
        margin-right: .9rem;
        position: absolute;
        left: 0;
        top: -.2rem;
    }
}

<div class="submitter-info">
    <a href=""><img src="/avatar-7.jpg" alt="Contact Person"> username</a>
    <span class="followers">545 Followers</span>
</div>

Just curuious if you see any disadvantage using this method in comparison to the methods you all came up with?

I don’t see any problem with it, in fact it’s probably the easiest way to do it.
It eliminates an anchor, which was a duplicate url anyway.

3 Likes

Yes we were assuming that you needed the 2 anchors which is why it was awkward. With one anchor it’s just straight forward :slight_smile:

2 Likes

I definitely could have communicated that better. :slight_smile:

Thanks!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.