onhover默認情況下第一個div在js中處于活動狀態

這里我默認有多個 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>

uj5u.com熱心網友回復：

如果我能理解你的需要，你想默認顯示第一個 div ，然后在懸停圖示時顯示它的相關 div ，并在停止懸停圖示后保持顯示，

所以需要創建和active類，使 div 可見，

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

.active  {
  visibility:visible !important;
};

然后添加最后一次，將圖示懸停在相關的 div (by 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>

標籤：javascript html 查询 css

上一篇：使用javascript更改具有相同類的所有元素的內容

下一篇：使用標題和相關標題值對json資料進行排序