当另一个 div 悬停在顶部时更改 div 的 CSS答案

【问题标题】：Alter CSS of div when another div is hovering on top当另一个 div 悬停在顶部时更改 div 的 CSS
【发布时间】：2018-07-07 17:43:03
【问题描述】：

我有一个可排序的列表如下：

  <html>
  <head>
  <title>jQuery UI Sortable - Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>

  <style>
      .sortableItem {
          height: 50px;
          width: 300px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding-top: 10px;
          text-align: center;
          font-weight: bold;
          border-radius: 0 10px 10px 0;
          background-color: #e7f0fe;
          color: gray;
          margin: 3px;
      }

      .sortableItem:hover {
          cursor: pointer;
      }



      #sortable {
          float: left;
      }

      #sortable1 {
          float: right;
      }

      #times {
          float: left;
      }

      .day {
            cursor: not-allowed;
          background-color:#4885ed;
          color: white;
      }

      .swapable {
          z-index:  10;
      }

      .swapable:hover {
          color: #4885ed;
      }



  </style>

  <script>


      $(function() {
$(".swapable").
draggable({ revert: true }).
droppable({
    drop:function(event,ui){
        swapNodes($(this).get(0),$(ui.draggable).get(0));
    }});
});


function swapNodes(a, b) {
var aparent= a.parentNode;
var asibling= a.nextSibling===b? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}

  </script>

  </head>

  <body>

   <button id="click">Click me</button>





   <script>


    /* $("#click").click(function() {
        var hotelOrder = [];
        for(var i = 0; i < 6; i++) {

     hotelOrder.push(sortable.children[i].innerHTML);
    $("#test"+i).html(hotelOrder[i]);
        } 
    }) */

   </script>

   <div id = "sortable" class="ui-state">

        <div class = "sortableItem swapable ui-state-default day">Monday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable1">Hotel 1</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable2">Hotel 2</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable3">Hotel 3</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable4">Hotel 4</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable5">Hotel 5</div>



          <div class = "sortableItem day">Tuesday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable6">Hotel 6</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable7">Hotel 7</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable8">Hotel 8</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable9">Hotel 9</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable10">Hotel 10</div>


          <div class = "sortableItem day">Wednesday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable11">Hotel 11</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable12">Hotel 12</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable13">Hotel 13</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable14">Hotel 14</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable15">Hotel 15</div>


          <div class = "sortableItem day">Thursday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable16">Hotel 16</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable17">Hotel 17</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable18">Hotel 18</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable19">Hotel 19</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable20">Hotel 20</div>


         <div class = "sortableItem day">Friday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable21">Hotel 21</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable22">Hotel 22</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable23">Hotel 23</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable24">Hotel 24</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable25">Hotel 25</div>

      </div>

   <script>


  $('.swapable').mouseover(function() {
 // set ohters element to the initial level
 $(this).siblings('.swapable').css('z-index', 10);
 // set clicked element to a higher level
 $(this).css('z-index', 11);
 });

   </script>

所以我有了我的 Sortable 元素，我可以通过拖放一个并放在另一个上来交换 div。我想要实现的效果如下 - 当我将特定元素拖动到另一个位置时，我希望突出显示我悬停的 div 以便用户知道它们处于正确的位置以放置 div .例如，假设我想将#draggable2 与#draggable6 切换，当我将#draggable2 拖动到#draggable6 时，我希望在放置元素之前突出显示#droppable6，以便我知道我在正确的位置。

我试过 #droppable6:hover 但这显然不起作用。如果有人有任何想法...

【问题讨论】：

您的代码中没有 droppable6 类或 id

标签： jquery draggable jquery-ui-droppable

【解决方案1】：

如果您使用的是 jQuery UI，只需为 .ui-droppable-active 添加 CSS 声明，例如：

.ui-droppable-active {
    font-weight: bold;
    background: #ff0000;
    color: #fff;
    /* other styles */
}

这是内置到小部件中的，每个 the documentation：

可放置小部件使用 jQuery UI CSS 框架来设置其外观样式。如果需要可放置的特定样式，可以使用以下 CSS 类名来覆盖或作为 classes 选项的键：

添加了ui-droppable-active 类。拖动可拖动对象时这个droppable，添加了ui-droppable-hover类。

编辑：

如果这不能让您到达您需要去的地方，您可以在设置 .droppable() 时定义一个 hoverClass 参数。

CSS：

.rollover {
    font-weight: bold;
    background: #ff0000;
    color: #fff;
    /* other styles */
}

JavaScript：

$(".swapable").
draggable({ revert: true }).
droppable({
    hoverClass: "rollover", /* <- added this */
    drop:function(event,ui){
        swapNodes($(this).get(0),$(ui.draggable).get(0));
    }});
});

【讨论】：