0

试图divs opacity在悬停其他元素时为 a 设置动画。首先我用display none/尝试了它block，但它在某处读到它不可能为此进行转换。

这有点复杂，因为这应该适用于具有不同 id 的相同类型的每个元素。（当图片悬停时，带有标题的图片库将显示在img元素的底部。）

HTML结构是这样的：

<article id="{PostID}">
    <div class="post-content">
        <a><img></a>
        <div class="post-content--padded">
            <p>Caption of the picture.</p>
        </div>
    </div>
</article>

首先，我使用mouseover,mouseout方法添加到post-content div其中，如下所示：

onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"

那行得通，但没有transition. 我已经使用过渡处理程序设置了 CSS，以应用于其中的所有 css 更改，post-content--padded如下所示：

-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

这似乎不会影响我所做的mouseover不mouseout透明度更改，所以我尝试添加.animate()它，但没有太大成功。好吧，我必须post-content淡入淡出，但不是post-content--padded

不同的方法

这一切都没有那么奏效。所以我尝试使用该JQuery功能hover()。长话短说，我在有问题的 html 上方添加了这个：

<script type="text/javascript">
$(document).ready(function(){
    $('#{PostID}.post-content').hover(
    function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
    function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
    );
 });
</script>

这只是不想工作。无休止的浏览stackoverflow和其他来源似乎对我没有帮助。被困在这个问题上一个多小时，我决定简单地问一下。添加悬停>不透明过渡并不难。

希望我还不清楚，人们在这里理解我的问题。

4

3 回答 3

2

如果你只需要悬停，你可以只使用 css

.post-content--padded{
    opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}
.post-content:hover .post-content--padded{
    opacity: 1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s;
}

在此处查看演示

如果你想使用 Jquery

$('.post-content--padded').hide();
$('.post-content').hover(function(){
    $(this).find('.post-content--padded').fadeToggle(2000);
});

在此处查看演示

于 2014-12-29T22:32:27.230 回答
1

我还致力于将悬停与动画结合起来，它的工作原理是这样的：

在 CSS 不透明度中，“a” = 0

在 jQuery 中：

$("#classy").hover(function(){
      $("#classy").animate({
          opacity:"1"
      },200);
  }, function(){
      $("#classy").animate({
          opacity:"0"
      },200);
  });
于 2016-01-07T19:36:45.517 回答
0

这是一个有效的jQuery方法：

HTML

<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>

CSS

.hide {
    opacity:0;
}

JS

$('#hover-me').hover( function() {
    if ($('#change-me').hasClass('hide')) {
        $('#change-me').removeClass('hide', 'slow');
    } else {
        $('#change-me').addClass('hide', 'slow');
    }
});

jsFiddle 演示

*这是包含jQueryUI的

于 2014-12-29T22:38:48.587 回答