There are two divs, both divs have an icon in the corner to edit their properties. I want only one icon to be present at any particular time. When hovering over outer div, the icons are shown in the outer div corner. When hovering on inner div the icon box is shown in both the divs. How can I suppress the outer divs icon box when hovering over inner div. Here is my code
$(".icons").parent().hover(function() { // Mouse over
$(this).find('.icons').first().css('display', 'block');
}, function() { // Mouse out
$(this).find('.icons').first().css('display', 'none');
}); .outer{
width: 500px;
height: 200px;
background-color: fuchsia;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.inner{
width: 300px;
height: 100px;
background-color: #2c132c;
position: relative;
}
.icons{
content: '^';
size: 22px;
background-color: gold;
color: honeydew;
width: 20px;
height: 15px;
position: absolute;
top: 0;
left: 0;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer">
<div class="icons"></div>
<div class="inner">
<div class="icons"></div>
</div>
</div>I want to show only one icons box at a time. So when inside inner div, I don't want to show the icons from outer div.
I made it more flexible with mouseenter and mouseleave by making it active when you enter the Div and when you leave the Div his parent will be active
$(".show-icons").mouseenter(function (e) { // Mouse over
$(".icons").hide();
$(this).find('.icons').first().show();
});
$(".show-icons").mouseleave(function (e) { // Mouse over
$(".icons").hide();
$(this).parents(".show-icons").first().find('.icons').first().show()
});.outer {
width: 500px;
height: 200px;
background-color: fuchsia;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.inner {
width: 300px;
height: 100px;
background-color: #2c132c;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.inner-2 {
width: 100px;
height: 50px;
background-color: #ccc;
position: relative;
}
.icons {
content: '^';
size: 22px;
background-color: gold;
color: honeydew;
width: 20px;
height: 15px;
position: absolute;
top: 0;
left: 0;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer show-icons">
<div class="icons"></div>
<div class="inner show-icons">
<div class="icons"></div>
<div class="inner-2 show-icons">
<div class="icons"></div>
</div>
</div>
</div>The only way I can think of implementing this would be to keep a separate check in JS, if the mouse hovers over the inner div then just make the outer div icons display: none, however, I am not so sure how this will be implemented as I don't use jquery so far and also haven't looked into the hover() function.
You can make it like, if the mouse hovers over the outer div, then display its outer icons, and in case it goes and also hover over the inner div, then you can set the outer icons display to none and inner ones to display block. You might need event listener for this I believe.
Because the inner div is completely contained within the outer div you could just listen for the mouse movements (over/out) on the outer div, pick up what the target element is and set/unset its icons to display block/none.
const outer = document.querySelector('.outer');
outer.addEventListener('mouseover', function (e) {
e.target.querySelector('.icons').style.display = 'block';
});
outer.addEventListener('mouseout', function (e) {
e.target.querySelector('.icons').style.display = 'none';
}); .outer{
width: 500px;
height: 200px;
background-color: fuchsia;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.inner{
width: 300px;
height: 100px;
background-color: #2c132c;
position: relative;
}
.icons{
content: '^';
size: 22px;
background-color: gold;
color: honeydew;
width: 20px;
height: 15px;
position: absolute;
top: 0;
left: 0;
display: none;
} <div class="outer">
<div class="icons"></div>
<div class="inner">
<div class="icons"></div>
</div>
</div>