Did you experiment with employing a media query to check for :hover functionality?

Refer to this link for more information.

Upon close observation, it is evident that this behavior is intentional on iOS devices, even when swiping through a list of items with hover effects.

If your aim is to simply avoid the hover effect, here's a solution you can try. Use a JavaScript function to detect the device, add a specific class to the body element, and eliminate any hover effects as necessary.

Javascript:

function isAppleDevice() {
  return (
    (navigator.userAgent.toLowerCase().indexOf("ipad") > -1) ||
    (navigator.userAgent.toLowerCase().indexOf("iphone") > -1) ||
    (navigator.userAgent.toLowerCase().indexOf("ipod") > -1)
   );
}
if (isAppleDevice()) {
  $('body').addClass('is_apple')
}

CSS:

.is_apple a:hover {
  // apply the same styling as for non-hovered state
}

It appears that Safari behaves this way intentionally. According to Apple's documentation, single-finger taps are treated as mouse events and specific events are triggered during a tap sequence. While there is a 'mouseover' event at the start of the tap, a 'mouseout' event only occurs when clicking on another element. This suggests that Safari assumes the pointer remains in place until the next tap, thus justifying the hover state for the lower element.

I tested your code on Chrome for Android, as well as Chrome and Firefox for Windows (I do not own an Apple device). In all three cases, clicking on the <div> with a mouse over the link resulted in the hover style being applied to the link afterward, unless I moved the cursor away before releasing the mouse. When tapping the <div> with my finger on a touchscreen device, the link did not receive the hover style.

Chrome and Firefox exhibit consistency between touch and mouse interactions, whereas Safari seems to treat touchscreens similarly to how Chrome & Firefox handle mouse clicks, suggesting it views touch input as if it were a mouse input.

I don't believe this behavior requires fixing or circumventing. Unless you can guarantee all users will utilize a specific hardware/browser setup, it's essential to consider the possibility that they may use a mouse, touchscreen, or even both simultaneously. My Windows laptop and Android tablet feature both touchscreens and trackpads, while I occasionally use a USB OTG mouse with my Android phone.

You might want to explore the Pointer Events API, which functions in Chrome, IE, and Edge (distinct from the CSS property mentioned by @erier - pointer-events). As the API handles events rather than CSS, it won't directly aid in achieving correct styling but demonstrates ongoing efforts to ensure browsers respond consistently to diverse input devices.

Give the new media query technique a try to determine if the user's primary input method supports hovering over elements.

@media (hover) {
  // Insert your hover effects here
  a:hover {
    color: red;
  }
}

More information: hover - CSS: Cascading Style Sheets | MDN

It appears that iOS may have made an intentional design choice to mimic the behavior of a mouse, or perhaps Chrome has implemented this design decision themselves. iOS seems to be tailored towards a "mouse-like" experience, as it even displays "mouseovers" on websites despite being primarily touch-based. I've attempted to identify a way to detect if the user is using a mouse in order to disable hover effects, but so far, no suitable solution has been found.

Similarly, Windows seems to have adopted a similar approach with touch functionality, where touching a point effectively moves the mouse pointer to that location and triggers a click action, retaining the presence of the mouse pointer.

If this behavior is proving to be problematic for your design, you might need to consider making adjustments to accommodate it.

I encountered a similar issue that I managed to resolve by temporarily disabling pointer events for a split second just before removing the element, and then re-enabling them after it's been removed.

document.addEventListener("DOMContentLoaded", function ready() {
  var button = document.querySelector(".button");
  button.addEventListener("click", function() {
    document.querySelector('a').classList.add("no-click");
    button.parentNode.removeChild(button);
    setTimeout(function() {
        document.querySelector('a').classList.remove("no-click");
    },1);
  });
  
  document.querySelector('a').addEventListener("click", function() {
    window.alert('clicked!');
  });
});

a:link    { color: blue }
a:visited { color: blue }
a:hover   { color: red }
a:active  { color: green }

.button {
    background: rgba(100, 0, 0, .4);
    position: absolute;
  
    top: 2px;
    left: 2px;
    z-index: 1;

    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;
    border-radius: 5px;
}

.button:hover {
    background: rgba(0, 100, 0, .4);
    cursor: pointer;
}
.no-click {
    pointer-events: none;
}

<a href="#">Some link</a>
<div class="button">Click me!</div>

For those interested in honing their design skills further, delving into the Level 4 Media Query specification could prove invaluable as it allows for targeted styling on devices with hover capabilities.

@media (pointer: fine) {
    display: flex;
}

It seems like this trick could do the job.

To implement it, first disable hover using a specific class. Then, create an event listener that removes the hover-blocking class when the main div is clicked and the mouse moves.

document.addEventListener("DOMContentLoaded", function ready() {
  var button = document.querySelector(".button");
  button.addEventListener("click", function() {
    button.parentNode.removeChild(button);
    var body = document.querySelector("body");
    body.addEventListener("mousemove", function() {
            var someLink = document.querySelector(".some-link");
            someLink.classList.remove("no-hover");
        });
  });
  
  document.querySelector('a').addEventListener("click", function() {
    window.alert('clicked!');
  });
});

a:link    { color: blue }
a:visited { color: blue }
a:hover   { color: red }
a:active  { color: green }

a.no-hover:hover { color: blue }

.button {
    background: rgba(100, 0, 0, .4);
    position: absolute;
  
    top: 2px;
    left: 2px;
    z-index: 1;

    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;
    border-radius: 5px;
}

.button:hover {
    background: rgba(0, 100, 0, .4);
    cursor: pointer;
}

<a href="#" class="some-link no-hover">Some link</a>
<div class="button">Click me!</div>

Consider utilizing pointer-events for improved functionality.

document.addEventListener("DOMContentLoaded", function ready() {
  var button = document.querySelector(".button");
  button.addEventListener("click", function() {
    button.parentNode.removeChild(button);
  });
  
  document.querySelector('a').addEventListener("click", function() {
    window.alert('clicked!');
  });
});

a {pointer-events: none;}
a:link    { color: blue; pointer-events: auto; }
a:visited { color: blue }
a:hover   { color: red; pointer-events: auto; }
a:active  { color: green; pointer-events: auto; }

.button {
    background: rgba(100, 0, 0, .4);
    position: absolute;
  
    top: 2px;
    left: 2px;
    z-index: 1;

    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;
    border-radius: 5px;
}

.button:hover {
    background: rgba(0, 100, 0, .4);
    cursor: pointer;
}

<a href="#">Some link</a>
<div class="button">Click me!</div>

Not sure if this method would be feasible for your actual production code, but it should do the trick for this specific scenario.

One option could be to extract your hover rules into a separate class and then apply this class to the link within the button removal callback function after removing it from the DOM.

If that approach still doesn't achieve the desired outcome, you might consider adding the class within an onmouseover callback. This way, the class would only be applied after the button has been removed and once the link is exited (if applicable) and re-entered.

Although these solutions may seem a bit of a workaround, they can help customize the behavior to adapt to different browsers or operating systems as needed.

There seems to be an issue with browsers where the hover state appears everywhere even when it shouldn't.

To resolve this, I suggest adding a class called .no-touch to the body and styling only elements with that class.

if (!("ontouchstart" in document.documentElement)) {
    document.body.classList.add('no-touch')
}

Here is a consolidated solution:

if (!("ontouchstart" in document.documentElement)) {
    document.body.classList.add('no-touch')
}
document.addEventListener("DOMContentLoaded", function ready() {
  var button = document.querySelector(".button");
  button.addEventListener("click", function(e) {
    button.parentNode.removeChild(button);
  });
  
  document.querySelector('a').addEventListener("click", function() {
    window.alert('clicked!');
  });
});

a:link    { color: blue }
a:visited { color: blue }
.no-touch a:hover   { color: red }
a:active  { color: green }

.button {
    background: rgba(100, 0, 0, .4);
    position: absolute;
  
    top: 2px;
    left: 2px;
    z-index: 1;

    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;
    border-radius: 5px;
}

.button:hover {
    background: rgba(0, 100, 0, .4);
    cursor: pointer;
}

<a href="#">Some link</a>
<div class="button">Click me!</div>

I understand this may not be the exact solution you were seeking, but it will help maintain consistency across Android and iOS platforms and potentially assist others facing the same issue in the future.

Information on MouseEvent relatedTarget can be found in the documentation.

If there is no secondary target for events, the relatedTarget value will be null.

This scenario occurs when the event mouseover or mouseenter is triggered by a click or touch.

someElement.addEventListener(
  "mouseenter",
  (e)=>{
    e.relatedTarget // Will be null if triggered by click or touch, 
                    // otherwise it points to the element where the pointer originated from.
  })