How to remove icons from outer div on inner div hover?-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

You can hide/show the outer icons when you show/hide the inner icons.

The selectors could be improved by adding a class to the inner/outer icons directly rather than .closest and then wouldn't need to use >.icons.

Without changing your html / css

$(".icons").closest(".inner").hover(function() { 
  $(this).closest(".outer").find(">.icons").hide();
  $(this).find('.icons').first().show();
}, function() { 
  $(this).find('.icons').first().hide();
  $(this).closest(".outer").find(">.icons").show();
});

Updated snippet

$(".icons").closest(".outer").hover(function() { 
  $(this).find('.icons').first().show();
}, function() { 
  $(this).find('.icons').first().hide();
});
$(".icons").closest(".inner").hover(function() { 
  $(this).closest(".outer").find(">.icons").hide();
  $(this).find('.icons').first().show();
}, function() { 
  $(this).find('.icons').first().hide();
  $(this).closest(".outer").find(">.icons").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;
}

.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>

CodePudding user response：

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>