css has() selector weirdness (chrome) - css

Question

Recently, I had a case where the has() selector seemed to provide the answer to a problem. And I found that it isn't. And not because FireFox doesn't support it. (Although that is a problem too.)
To show this I made a codepen lookahead selector is weird
The bit with class v1 is the first solution I came up with. And I have no idea why it doesn't work.
When I saw v1 didn't work, I came up with the alternative with class v2. That also didn't work. But I could at least understand why.
Considering that the halves that did work cover all that I need, I made the one with class v3.
Intrigued by v1 not working, I also made v1a,to see if I could figure out which part of the selection doesn't do what I think it does.
And that shows just how weird has() is. Adding the rule for the background of the table flipped the does/doesn't work on the rules.
Also, by accident, I ended up wildly moving across the elements of the table of v1. And at some moment...both rules started working. For v1a, the same. If you want to see this, just make circles on the v1 table hitting all the tds until you see both spans on the right responding.
I tried with both Chrome and Edge. FireFox simply doesn't support it. And I don't happen to have Safari handy to try it on.
Can anyone give an explanation so I understand what is going on? Preferably with pointers to getting something that works in a way that makes a bit more sense.
td {
border: 1px solid black;
}
table {
background-color: skyblue;
margin: 10px;
}
span {
display: inline-block;
padding: 5px;
}
.v1a:has(td .span1:hover) {
background-color: green;
}
.v1:has(td .span3:hover) tr td .span2, /* Ok */
.v1:has(td .span1:hover) tr td .span4 { /* NOk. Why? */
background-color: red;
}
.v2 tr:has(td .span3:hover)~tr td .span2, /* NOk, but I know why. */
.v2 tr:has(td .span1:hover)~tr td .span4 { /* Ok */
background-color: red;
}
.v3:has(td .span3:hover) tr td .span2, /* Ok */
.v3 tr:has(td .span1:hover)~tr td .span4 { /* Ok */
background-color: red;
}
<table class="v1">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
<table class="v1 v1a">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
<table class="v2">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
<table class="v3">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>