Question

if ($('.add-to-cart').hasClass("disabled"))
{
    if ($('.tooltip').hasClass("show"))
    {

        $(this).mouseout(function(){
            $('.tooltip').removeClass('show');
        });
    }
    else
    {

        $(this).mouseover(function(){
            $('.tooltip').addClass('show');
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purchase">
    <span class="tooltip">This is some information for our tooltip.</span>
    <input type="submit" value="Add to basket" class="add-to-cart disabled" id="submit-table" />
</div>

我已经为我的问题找到了一些解决方案，但它们似乎都不适合我。

当您将鼠标悬停在某个按钮上时，我正试图显示span，当您 NOT 悬停在按钮上时，我还要隐藏span 。一个简单的隐藏/显示功能，我只想在按钮的类为disabled时实现，这里的JS只显示跨度但不隐藏它。

Answer 1

＆＃13;

$('#submit-table').mouseover(function() {
  $('.tooltip').toggle('slow');
});

$('#submit-table1').mouseover(function() {
  $("#submit-table1").attr('title', 'This is the hover-over text');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="purchase">
  <span class="tooltip">This is some information for our tooltip.</span>
  <input type="button" value="Add to basket" class="add-to-cart disabled" id="submit-table" />


  <input type="button" value="Add to basket 1" class="add-to-cart disabled" id="submit-table1" />
</div>

＆＃13;

试试这样。如果按钮悬停，则使用.toggle()显示或隐藏范围

Answer 2

你可以使用jQuery＆＃39; s .hover()，它有两个参数 - 一个在你开始悬停时运行，另一个在你停止时运行。传递它的功能是显示你的工具提示，然后是隐藏它的功能，你应该排序。

一般要点是$button.hover(showTooltip, hideTooltip)。如果您愿意，可以在那里写匿名函数。

我做了一个快速的jsfiddle（https://jsfiddle.net/fv6ar05k/1/）用HTML来证明这一点。我交换了工具提示和按钮，以便工具提示没有按下按钮。

Answer 3

你实际上并不需要javascript来实现这一目标。这是一个纯粹的CSS解决方案。首先，重新排列标记，使跨度位于按钮之后，如下所示：

<div class="purchase">
    <input type="submit" value="Add to basket" class="add-to-cart disabled" id="submit-table"/>
    <span class="tooltip">This is some information for our tooltip.</span>
</div>

然后添加以下CSS：

.tooltip {
  display:none;
}
.add-to-cart.disabled:hover+.tooltip {
  display:block
}

Here is a fiddle showing it in action

＆＃34; +＆＃34;这是关键点 - 这是＆＃34;下一个兄弟＆＃34;选择。所以css选择器正在寻找一类＆＃34;工具提示＆＃34;在一个元素上，该元素紧跟在处于悬停状态的元素之后，同时具有＆＃34; add-to-cart＆＃34;并且＆＃34;禁用＆＃34;类。

你也可以使用＆＃34;〜＆＃34;选择器而不是＆＃34; +＆＃34;寻找按钮后面的任何元素，但不一定是下一个兄弟（但它仍然必须是兄弟姐妹）。所有现代浏览器都支持这两种选择器。

如果光标悬停在按钮上，则显示/隐藏div

3 个答案: