0

I have an issue where I want to activate hover state on a link when hovering on the container anywhere but except on two buttons save and close. CSS approach is preferred but if not vanilla JavaScript would be fine. Please have have look I have created a codepen

Rajkeshwar Prasad
  • 869
  • 8
  • 11
  • You can find this solution/approach in the link [here](https://stackoverflow.com/questions/17923922/hover-on-child-without-hover-effect-on-parent) – Hellmodeon Aug 16 '19 at 09:09
  • That doesn't fit my requirement too. Since I want to activate hover effect on a link. Hovering a div element is easy but a link within it. Since the link get different background and color if it is a visited link. – Rajkeshwar Prasad Aug 16 '19 at 09:46
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Aug 16 '19 at 10:19

3 Answers3

1

You can not trigger pseudo events. you can give it same styling when the box is hovered:

.box {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  transition: background .3s ease-in-out;

  &:hover {
    background: #f1f1f1;
    a {
      color: #525199;
      background-color: #e6e6f0;
      border-color: #525199;
    }
  }
Gugu
  • 193
  • 1
  • 8
  • The problem with this approach is I don't want hover state on the `link` while hovering on the `Save` or `Cancel` button and that is the challenge. – Rajkeshwar Prasad Aug 16 '19 at 09:06
1

This is not possible with pure CSS, as explained on the question How to style the parent element when hovering a child element?

The solution, then, is to add some Javascript to style the parent element, for example by adding a class to the parent element. A simple code snippet to achieve this with your solution, would be the following:

document.querySelectorAll('.save, .cancel').forEach(function(button) {
  button.addEventListener("mouseover", function() {
    button.parentNode.parentNode.className = 'box nohover';
  });
  button.addEventListener("mouseout", function() {
    button.parentNode.parentNode.className = 'box';
  });
});

And you'd then need to style the {{nohover}} class by not changing the background:

.nohover:hover {
  background: none;
}

See this codepen for a working demo.

Mathias-S
  • 787
  • 3
  • 9
0

try this:

.box:hover :not(.box--right):hover a {
    color: #525199;
    background-color: #e6e6f0;
    border-color: #525199;
}
sumeshsn1
  • 756
  • 5
  • 13