0

我创建了一些按钮翻转和“优雅降级”的缘故，并且为了不为每个图像翻转等编写代码，我试图编写更好更有效的代码。也就是说，我想要做的是，通过几行代码，我的翻转变得更加智能，它们在屏幕上显示的内容。

我试图实现的一件事是，在翻转时，出现在图像 div 中心的文本（通过 css 绝对位置）与图像的alt属性/元素中的文本相同。

这是带有缩略图的 reg div：

 <div class="imgW"><img src="img src here"/></div>

现在对于翻转，我通过 jquery 添加它：

$('.imgW').prepend('<div class="portSecRollOver">lopan</div>');

所以在页面渲染上，它应该是这样输出的：

<div class="imgW">
  <div class="portSecRollOver">lopan</div>
  <img src="img src here"/>
</div>

在页面加载时，portSecRollOver 通过 css 隐藏。(display:none);

在翻转时，portSecRollOver 通过 jquery 显示：

$('.imgW').mouseover(function(){

        $(this).children('.portSecRollOver').css("display","block");
    });

ETC...

现在在上面的同一个翻转功能块上，我想做的是在翻转时，出现在 portSecRollOver div 内的文本是该 div 图像 alt 标记的值。

我怎样才能做到这一点？

我尝试了很多方法，但最终都一无所获。当我对它进行 console.log 测试时，我总是得到一个“未定义”，这导致我假设我没有针对正确的 dom 对象。

有任何想法吗？我尝试了很多方法，但是，这是为了让您了解我尝试过的内容......类似

$(this).children('.portSecRollOver').html($(this).children('a img').attr('alt'));

提前致谢。

4

4 回答 4

1

你应该使用.children('img')而不是.children('a img')因为你只有一个img孩子，而不是一个锚a后跟一个img.

于 2012-09-10T23:34:07.730 回答
1

试试这个：新： http: //jsfiddle.net/vSFTU/1/旧：http: //jsfiddle.net/sKQpd/

我意识到你希望altsrc 出现在portSecRollOver下面应该这样做：http: //jsfiddle.net/vSFTU/1/

希望能满足你的需要:)

代码

$('.imgW').on('mouseover', function() {
    $(this).children('.portSecRollOver').html($(this).find('img').prop('alt'));
    $(this).children('.portSecRollOver').show();

});

$('.imgW').on('mouseout', function() {

    $(this).children('.portSecRollOver').hide();

});
​
于 2012-09-10T23:36:18.327 回答
1

<a>看起来您走在正确的轨道上，但正如 João 指出的那样，您的代码中没有标签。这是您需要的：

$('.imgW').mouseover(function() {
    var portSecRollOver = $(this).children('.portSecRollOver');
    var img = $(this).children('img');
    portSecRollOver.html( img.attr('alt') );
    portSecRollOver.show();
});

JsFiddle：http: //jsfiddle.net/bM25f/1/

于 2012-09-10T23:48:10.603 回答
1

你可以很容易地通过这种方式编码来实现它，或者如果你想要更有趣的东西，你可以像这样制作它。

于 2012-09-10T23:56:24.930 回答