Как избавиться от родительского наведения при наведении на дочерний элемент div?

Question

HTML

<div class="div_a">
    <div>text</div>
    <div class="div_close"></div>
</div>

CSS

.div_a {pointer:cursor; z-index:100;}
.div_a:hover {border:1px solid red;}
.div_close {pointer:cursor; z-index:9999;}
.div_close:hover {border:1px solid blue;}

При наведении курсора на .div_a, div получает красную рамку.

И когда я наведите курсор на .div_close, тогда .div_a имеет красную рамку, а .div_close имеет голубую рамку.

Я хочу, чтобы при наведении указателя на .div_close, просто .div_close имеет синюю рамку.

Как убрать границу .div_a при наведении курсора на .div_close?

Answer 1

Почему бы не переместить курсор на текстовый элемент?

.div_a {pointer:cursor; z-index:100;}
.div_a:hover {border:1px solid red;}
.div_close {pointer:cursor; z-index:9999;}
.div_close:hover {border:1px solid blue;}

<div>
    <div class="div_a">text</div>
    <div class="div_close">close</div>
</div>

Answer 2

Посмотрите на этот фрагмент, я решил, что именно то, что вы хотите, я думаю,

function addClass(o, c){  
  document.getElementById("div_a").className = "withoutBorder";
    var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
    if (re.test(o.className)) return
    o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}
 
function removeClass(o, c){
document.getElementById("div_a").className = "withBorder";
    var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
    o.className = o.className.replace(re, "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}

.div_a {pointer:cursor; z-index:100;}
.div_a:hover {border:1px solid red;}
.div_close {pointer:cursor; z-index:9999;}
.div_close:hover {border:1px solid blue;}

.block {
  width: 100px;
  height: 100px;
  background: #eee;
  margin: 10px;
  display: inline-block;
}
.active {
 border:1px solid red;
 
}
.hover {
  background: yellow;
}
.withBorder{
border:1px solid red;
}
.withoutBorder{
border:none;
}

<div id="div_a">
    <div>text</div>
    <div id="div_close"
    onmouseout="removeClass(this, 'active');" onmouseover="addClass(this, 'active');">hello</div>
</div>