使用 jQuery .hover 函数答案

【问题标题】：Using the jQuery .hover function使用 jQuery .hover 函数
【发布时间】：2015-02-02 13:11:25
【问题描述】：

我有一些跨度，我试图使用 jQuery 和 CSS 可见性属性来切换指针悬停在它们上时的显示（显示属性也很好，但两者都没有起作用）。 spans的代码如下：

.buy1 {
  visibility: hidden;
}

<span class="buy1">
  <h3><a href="#">buy</a></h3>
</span>

可能的原因是我的 jQuery 是错误的，因为它不是我的强项。任何人有更好的建议吗？

<script type="text/javascript">
$( document ).ready(function() {
 
    $( "span.buy1" ).hover(function() {
 
        $("span.buy1").css("visibility","visible");
 
    });
 
});
</script>

【问题讨论】：

您想在鼠标悬停时显示并在鼠标移出时隐藏吗？

标签： jquery css hover visibility

【解决方案1】：

this怎么样

JQUERY

$(document).ready(function () {
    $("span.buy1 a").hover(function () {
        $(this).stop().animate({"opacity" : "1"});
    }, function () {
        $(this).stop().animate({"opacity" : "0"});
    });
});

CSS

.buy1 a{
    opacity:0;
}

【讨论】：

应该被接受为那里唯一可行的解决方案:-)
这很有效，看起来很棒！谢谢！为了更好的用户界面，是否有任何方法可以修改此脚本，以便在其父元素（在本例中为 div）悬停时显示跨度？

【解决方案2】：

您可以在 css 上使用它

.buy1:hover {
    visibility: visible;
}

.buy1 {
    visibility: hidden;
}

【讨论】：

【解决方案3】：

请参阅Hover over a hidden element to show it 了解类似问题。基本上，您可以通过将 opacity 设置为 0 并使用 jQuery 的 fadeTo 方法或任何其他调整不透明度的方法来完成此操作。

$( document ).ready(function() {
 
    $( "span.buy1" ).hover(function() {
        $("span.buy1").fadeTo(1,1);
 
    }, function() {
        $("span.buy1").fadeTo(1,0);  
    });
 
});

.buy1 {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="buy1">
  <h3><a href="#">buy</a></h3>
</span>

【讨论】：

【解决方案4】：

$(document).ready(function() {
    $('span.buy1').hover(
        function () {
            $(this).show().stop().animate({
                left:'15px',
                opacity:'0.5'
            },500);  
        }, 
        function () {
            $(this).hide().stop().animate({"opacity": "1"},5000);    
        }
    );
});

试试这个..

【讨论】：