Question

我有一张桌子，我希望在悬停时将div改为另一个div，并且在悬停时我想改变之前的状态。

我的桌子

<table id="table2">
<body>
  <tr>
     <td>
        <div id="com.zynga.wwf2.free" class="redips-drag orange" style="border-style: solid; cursor: move; background-image: url(https://lh3.googleusercontent.com/mm9kB_B7UTEMuG2t914nmu2pox-G5a64GlajDaUdf7M5LfKBeYpBbeouyRVgsBATLSA=w300); background-size: 100px 100px; background-repeat: no-repeat;  width: 100px;
           height: 100px;"></div>
     </td>
  </tr>
</body>
</table>

现在我想在悬停时更改div：

<div><span>clicks:123</span><br><span>money:7890</span></div>

并在hoverout上返回之前。

我试试这个：

        var temp_html;
    $("#table2 tr").find('div').hover(function(){
          var temp_html = $(this).clone().wrap('<div>').parent().html();

        $(this).replaceWith("<div><span>clicks:123</span><br><span>money:7890</span></div>");

        }, function() {
       $(this).replaceWith(temp_html);
    });

我做错了什么？

Answer 1

尝试在表格中同时使用这两个div并切换其可见性：

HTML

<td id="cell">
  <div id="one"></div>
  <div id="two" class="hidden"></div>
</td>

CSS

.hidden { display:none }

的jQuery

$('#cell').on('mouseenter', function() {
   var that = $(this);
   that.find('#one').addClass('hidden');
   that.find('#two').removeClass('hidden');
}).on('mouseleave', function() {
   var that = $(this);
   that.find('#one').removeClass('hidden');
   that.find('#two').addClass('hidden');
})

更好的解决方案

只需切换悬停元素的类，让CSS处理其余的元素！

HTML

<td id="cell" class="visibleOne">
  <div id="one"></div>
  <div id="two"></div>
</td>

CSS

#cell.visibleTwo #one { display:none }
#cell.visibleOne #two { display:none }

的jQuery

$('#cell').on('mouseenter', function() {
   $(this).removeClass('visibleOne').addClass('visibleTwo');
}).on('mouseleave', function() {
   $(this).removeClass('visibleTwo').addClass('visibleOne');
})

Answer 2

您只能将CSS用于:hover伪类：

td .redips-drag + div, td:hover .redips-drag {
    display: none;
}
td:hover .redips-drag + div {
    display: block;
    min-height: 100px; /* set min-height to the biggest height between both elements to swap */
}

在悬停时替换整个div并切换回鼠标悬停

2 个答案:

DEMO