jquery - 非常简单的jquery可放置hoverClass不起作用

Question

我知道这应该很简单，但我已经剥离了几乎所有内容。

我的 drop 函数触发，一切似乎都是正确的，但悬停类不会更改 div 边框和背景。

我已在 Chrome、Firefox 和 Edge 下尝试过此操作。它一定是我缺少的东西，但我无法确定是什么。

CSS:

.drop-hover {
     background-color: yellow;
     border: 1px dotted red;
   }

#contactitems {
     background-color: white;
     width: 225px;
     display: inline-block;
     vertical-align: top;
     border: 1px solid black;
   }

   #divactions {
     background-color: white;
     width: 375px;
     display: inline-block;
     vertical-align: top;
     border: 1px solid green;
   }

   div.dvcontact {
     border: dotted;
     background-color: silver;
     border-width: thin;
     height: 80px;
     width: 165px;
     vertical-align: middle;
   }

   div.dvaction {
     border: solid 1px;
     background-color: aliceblue;
     height: 125px;
     width: 250px;
     vertical-align: top;
   }

Javascript

      $(".dvcontact").draggable({
        helper: 'clone'
      });

      $(".dvaction").droppable({
        hoverClass: 'drop-hover',
        drop: function (event, ui) {
                var idmove = "" + ui.draggable.attr('id');
                var idinto = $(this).attr("id"); // "group";
                dropaction(idmove, idinto);
            },
      });

      function dropaction (fromid,toaction) {
            alert(fromid + " dropped into " + toaction);
        };

HTML

<div id="contactitems" class="dvcontactbox">
  <div id="cnt-1" class="dvcontact">Last, first
     <br />ABC Co.
     <br />1/10/2016 | none</div>
  <div id="cnt-2" class="dvcontact">Last, first
     <br />ABC Co.
     <br />1/10/2016 | none</div>
  <div id="cnt-3" class="dvcontact">Last, first
     <br />ABC Co.
     <br />1/10/2016 | none</div>
  <div id="cnt-4" class="dvcontact">Last, first
     <br />ABC Co.
     <br />1/10/2016 | none</div>
</div>

<div id="divactions" class="dvrightside">

   <div id="dvactgroup" class="dvaction">Group:</div>
   <div id="dvactschedule" class="dvaction">Schedule:</div>

</div>

https://jsfiddle.net/cbtoolkit/k7b6oh72/

Answer 1

正在添加类；但这是一个 CSS 问题。这些属性正在被覆盖。

问题在于选择器 div.dvcontact 比选择器 .drop-hover 更具体。这会导致使用选择器 div.dvcontact 添加的背景颜色和边框覆盖使用 .drop-hover 添加的属性。

您可以增加the specificity选择器 .drop-hover 为 .dvaction.drop-hover 或 .ui-droppable.drop-hover。这样做时，它将覆盖现有的背景颜色和边框:

Updated Example

.ui-droppable.drop-hover {
  background-color: yellow;
  border: 1px dotted red;
}

这是计算出的每个选择器的特异性:

• div.dvcontact - 0, 0, 1, 1(类选择器和类型选择器)
• .drop-hover - 0, 0, 1, 0(类选择器)
• .ui-droppable.drop-hover - 0, 0, 2, 0(两个类选择器)
• .dvaction.drop-hover - 0, 0, 2, 0(还有两个类选择器)

由于 CSS 的级联性质，如果选择器具有相同的特异性，则最后出现的选择器(即样式表中最低的选择器)将覆盖前面的选择器，因为样式表是从上到下解析的。

附注:

• 了解更多关于CSS specificity at MDN的信息.

• 有 CSS 特异性计算器，例如 this one .