Question

我想使用 phoneNumberIcon css类来控制div的悬停可见性。但我也想最初使用名为 editIcon 的不同css类隐藏div。

#div1{
  width:200px;
  height:200px;
  background-color:red;
}

.editIcon {
  display: none;
}

<div id="div1" class="editIcon phoneNumberIcon"></div>

$(document).ready(function() {
  //$(".phoneNumberIcon").show();

  $("#div1").hover(function() {
    $(".phoneNumberIcon").show();
  }, function() {
    $(".phoneNumberIcon").hide();
  });

});

https://jsfiddle.net/6entpxbk/6/

Answer 1

您的代码无效，因为#div1和.editIcon.phoneNumberIcon它是相同的元素，您将其设置为使用CSS显示none，因此无需悬停。

您可以将图标放在#div1元素中：

$(document).ready(function() {
  //$(".phoneNumberIcon").show();

  $("#div1").hover(function() {
    $(".phoneNumberIcon").show();
  }, function() {
    $(".phoneNumberIcon").hide();
  });

});

#div1{
  width:200px;
  height:200px;
  background-color:red;
}

.editIcon {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div class="editIcon phoneNumberIcon">icon</div>
</div>

这也可以在不使用JavaScript的情况下轻松完成：

#div1 {
  width:200px;
  height:200px;
  background-color:red;
}

.editIcon {
  display: none;
}

#div1:hover .editIcon {
  display: inherit;
}

<div id="div1">
  <div class="editIcon phoneNumberIcon">icon</div>
</div>

Answer 2

您的HTML和Javascript没有意义。该框是隐藏的，因为您将editIcon类应用于它，隐藏它。你基本上（煮沸它）隐藏一个元素，然后试图将鼠标悬停在它上面。您需要将phoneNumberIcon类应用于内部 div，而不是div本身。
另一件事：如果你想要图标，那么使用Font Awesome，它现在非常受网络开发者欢迎。
Here's a fiddle showing what I mean, with the Font Awesome library.
这是您的代码的工作版本。

$(document).ready(function() {
  //$(".phoneNumberIcon").show();

  $("#div1").hover(function() {
    $(".phoneNumberIcon").show();
  }, function() {
    $(".phoneNumberIcon").hide();
  });

});

#div1 {
  width: 200px;
  height: 200px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="editIcon">
  <div class="phoneNumberIcon">
    <i class="fas fa-phone"></i>
  </div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

您应该学习HTML，因为您的代码表明您对它的了解并不牢固。 A quick search会让你回到正轨。

jquery悬停不使用css类选择器

2 个答案: