onhover默认是js中第一个div活动

Question

这里我有多个div，默认情况下我想显示第一个div，当没有任何东西悬停时，至少有一个div将被显示。

谁能告诉我正确的方向?

$('[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>

Answer 1

如果我能理解你的需要，你想默认显示第一个div，然后将你想要显示的图标悬停在相关的div上，并在停止悬停图标

后保持其显示所以我们需要创建一个active类，使div可见，

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

然后将最后一次悬停的图标添加到相关的div(通过data-id)，如下所示:

$('[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");
});

参见下面的代码片段:

$('[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>