Question

我有一个具有display:none属性的元素。现在，如果用户悬停父级，则会显示：

.item:hover .description {
    display: block; 
    z-index: 1;
}

现在，当我执行

时

$(".description").hide()

再次隐藏元素（用户可以单击元素中的X以关闭它），如果用户再次悬停父元素，则元素将不会再次显示。它保持隐藏。

我怎么不搞乱css节目和隐藏功能？

Answer 1

您给出代码的方式是混合CSS和JavaScript。 jQuery使用内联样式来完成.hide()或show。并且inline-styles比CSS更具体。使用class es并切换它们或只使用JavaScript。

我会这样做：

.item:hover .description {
  display: block; 
  z-index: 1;
}

.item .description {
  display: none;
}

以上是纯CSS方法。但是使用JavaScript，我会考虑使用toggleClass()代替.hide()或.show()。

.item:hover .description {
  display: block; 
  z-index: 1;
}

.item .description.hidden {
  display: none;
}

在JS中：

$(".description").addClass("hidden");

当您想要显示它时，您可以随时使用：

$(".description").removeClass("hidden");

对于切换事物，您可以使用：

$(".description").toggleClass("hidden");

Answer 2

这是因为在通过JS隐藏此元素时，您将可见性设置为隐藏。在下一次关注父级之后，您将不会设置可见性：可见这是必需的。

您可以执行

var chartData = items[i].transactionDate.reduce(function(total, month, index) {
    var monthlyData = {
        label: month.slice(5, 7),
        sales: items[i].amt[index]
    };
    total.months.push(monthlyData);
    total.totalSales += item.amt;
    return total;
}, { 
    totalSales: 0, months: []
});

// get total sales
var totalSales = chartData.totalSales;
// get sales for May starting at index 0
var salesForMay = chartdata.months[4];

下一次关注父元素后

Answer 3

hide将添加内联样式以隐藏元素，在这种情况下将覆盖CSS样式。

如果您使用JavaScript来隐藏元素，那么当不再相关时，您需要使用JavaScript来删除内联样式。我会在mouseleave上使用.item事件处理程序，并使用类来隐藏description：

CSS：

.item:hover .description.hide {
    display: none;
}

隐藏描述以响应点击X：

$(".item .description").addClass("hide");

当用户不再悬停.item时删除它：

$(".item").on("mouseleave", function() {
    $(this).find(".description.hide").removeClass("hide");
});

使用上面的直接处理程序，或使用事件委托（我在下面的示例中使用委托）。

直播示例：

// Hide when X clicked
$(document.body).on("click", ".item .description .close", function() {
  $(this).closest(".description").addClass("hide");
});

// Reset when user no longer hovering
$(document.body).on("mouseleave", ".item", function() {
  $(this).find(".description.hide").removeClass("hide");
});

.item .description {
  display: none;
}
.item:hover .description {
  display: block; 
  z-index: 1;
}
.item:hover .description.hide {
  display: none;
}

/* The following are just for the demo */
.close {
  cursor: pointer;
}
.item {
  position: relative;
  height: 2em;
  border: 1px solid black;
}

.item .description {
  position: absolute;
  background-color: #eee;
  left: 10em;
  top: 2px;
  border: 1px solid #ddd;
}

<div class="item">
  I'm item 1
  <div class="description">
    I'm description 1
    <span class="close">[x]</span>
  </div>
</div>
<div class="item">
  I'm item 2
  <div class="description">
    I'm description 2
    <span class="close">[x]</span>
  </div>
</div>
<div class="item">
  I'm item 3
  <div class="description">
    I'm description 3
    <span class="close">[x]</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用CSS显示时，jQuery隐藏元素保持隐藏状态

3 个答案: