onhover by default first div active in js

Question

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");
    }
  });

});

user_2932476 · Answer

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;
};



  icon 1
    
    icon 1
    icon 3
     icon 4
   icon 5
   icon 6



  test1
  test2
  test3
  test4
  test5
  test6

onhover by default first div active in js

1 Answers