onhover by default first div active in js-CodePudding

Here I have multiple div's by default I want to display the first div and when nothing is hovering then also at least any of one div will be displayed.

Can anyone suggest me in the right direction.

$('[class^="cr-box"]').css("opacity", "0");

$('[class^="cr-icon"]').hover(function(i, e) {
  var id = $(this).attr('data-id');
  var el = $('[class^="cr-box"]')[id - 1];
  $(el).css("opacity", "1");


}, function(i, e) {
  var id = $(this).attr('data-id');
  $('[class^="cr-icon"]').each(function(i, e) {

    if (id != $(e).attr('data-id')) {
      var el = $('[class^="cr-box"]')[id - 1];
      $(el).css("opacity", "0");
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cr-wrap-icons">
<svg>
    <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path>
    <img class="cr-icon cr-icon-2" data-id="2" >icon 2</img>
    <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path>
    <path class="cr-icon cr-icon-3" data-id="3" >icon 3</path>
    <img class="cr-icon cr-icon-4" data-id="4" >icon 4</img>
</svg>
</div>

    <div class="cr-wrap-box">
        <div class="cr-wrap">
            <div class="cr-box cr-box-1 active" >test1</div>
        </div>
        <div class="cr-wrap">
            <div class="cr-box cr-box-2" >test2</div>
        </div>
        <div class="cr-wrap">
            <div class="cr-box cr-box-3" >test3</div>
        </div>
        <div class="cr-wrap">
            <div class="cr-box cr-box-4" >test4</div>
        </div>
    </div>

CodePudding user response：

If I could understand your need , you want to show by default the first div , then on hovering the icon you want to show it's relevant div , and keep it shown after stop hovering icons ,

So nee to create and active class which make the div visble ,

/* by default make all divs hidden*/
div[class*="cr-box"] {
  visibility: hidden;
}

.active  {
  visibility:visible !important;
};

then add this last once hovering an icon to the relevant div (by data-id) as below :

$('[class^="cr-icon"]').hover(function(i, e) {
  var id = $(this).attr('data-id');
  // hide all divs
  $('[class^="cr-box"]').removeClass("active");
  // show relevant hovered icon's div using data id
  var el = $(`[class^="cr-box-${id}"]`).addClass("active");
});

See below snippet:

$('[class^="cr-icon"]').hover(function(i, e) {
  var id = $(this).attr('data-id');
  $('[class^="cr-box"]').removeClass("active");
  var el = $(`[class^="cr-box-${id}"]`).addClass("active");
});

div[class*="cr-box"] {
  visibility: hidden;
}

.active  {
  visibility:visible !important;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cr-wrap">
  <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path>
    <img class="cr-icon cr-icon-2" data-id="2" alt="icon 2" />
    <path class="cr-icon cr-icon-1" data-id="1" >icon 1</path>
    <path class="cr-icon cr-icon-3" data-id="3" >icon 3</path>
    <img class="cr-icon cr-icon-2" data-id="2" alt="icon 2" /> <path class="cr-icon cr-icon-3" data-id="4" >icon 4</path>
   <path class="cr-icon cr-icon-3" data-id="5" >icon 5</path>
   <path class="cr-icon cr-icon-3" data-id="6" >icon 6</path>
</div>

<div class="cr-wrap">
  <div class="cr-box-1 active" >test1</div>
  <div class="cr-box-2">test2</div>
  <div class="cr-box-3">test3</div>
  <div class="cr-box-4">test4</div>
  <div class="cr-box-5">test5</div>
  <div class="cr-box-6">test6</div>
</div>