Is it possible to disable hovering effects on inner elements?

Question

Is it possible to disable hovering effects on inner elements?

Disable the hover pseudo-class on child elements. Prevent the hover effect on child elements when hovering over them. Is there a way to achieve this?

.link:hover {
  background: #499a75;
}

<a href="#" class="link">
  Test
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</a>

html css

Answer 1

Answer №1

If you are using javascript, you have the ability to verify whether the event target matches the specific element where you want to implement an effect. If it does, then add a certain class; if not, remove it.

var link = document.querySelectorAll('a.link')[0];
link.addEventListener('mouseover', mouseEnter, false);
link.addEventListener('mouseout', mouseLeave, false);

function mouseEnter(event) {
    if(event.target === link) {
        link.classList.add('hover');
    }
    else {
        mouseLeave();
    }
}

function mouseLeave() {
    link.classList.remove('hover');
}

.link.hover {
  background: #499a75;
}

<a href="#" class="link">Example Text
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</a>

Answer 2

If you are using javascript, you have the ability to verify whether the event target matches the specific element where you want to implement an effect. If it does, then add a certain class; if not, remove it.

var link = document.querySelectorAll('a.link')[0];
link.addEventListener('mouseover', mouseEnter, false);
link.addEventListener('mouseout', mouseLeave, false);

function mouseEnter(event) {
    if(event.target === link) {
        link.classList.add('hover');
    }
    else {
        mouseLeave();
    }
}

function mouseLeave() {
    link.classList.remove('hover');
}

.link.hover {
  background: #499a75;
}

<a href="#" class="link">Example Text
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</a>

Is it possible to disable hovering effects on inner elements?

Answer №1

Similar questions

Using box-shadow with table rows

What is causing the colored SVG to appear lighter than the intended color after using a mask to recolor it?

Unable to get CSS First Child Pseudo Element to Work Properly

preferring images to be positioned side by side rather than stacked underneath each other

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

Incorporating an icon into a Bootstrap tab

Creating a grid cell that spans the entire grid width

``Protect your PDF Document by Embedding it with the Option to Disable Printing, Saving, and

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

What is the reason behind the constraints of min/max width and height values preventing the element from fully filling its parent div?

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

What causes the html5 <audio> tag to appear differently on Chrome versus IE browsers?

What are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?

Steps to align an SVG to the right within a div

Verify if a background image has been designated

Should you prioritize internationalizing your image alt attributes?

I am currently facing an issue with retrieving the class value that is being generated by PHP code

Angular 14's "rootItem" animation trigger was created with the following alerts: - The properties listed below are not animatable: overflow

Automatically add a table row at the bottom displaying the overall calculation

"An issue with preventing default behavior when clicking on a jQuery element