0

我有一个图像列表，我希望在单击它们时在它们旁边显示文本。我在默认状态下将图像的不透明度设置为 0.5，当用户将鼠标悬停在图像上时，不透明度变为完全或 1。

现在，只要文本框打开，我希望图像的不透明度为 1。

您可以通过查看此小提琴链接获得更好的主意。

我已经为我的javascript尝试了这个，但它不起作用：

$('.team-text .close').click(function () {
    $(this).parent('.team-text').hide();
});


$('.team-member .team-photo, .team-member .bio-button, .team-member-minor .team-photo, .team-member-minor .bio-button').on('click', function(){
  $(this).find('.team-text:visible').hide();
  $(this).find('.team-member img, .team-member-minor img').css('opacity','0.5');
});

$('.team-photo, .bio-button').on('click', function () {
   $('.team-text').hide();
   $(this).prevAll('.team-text:hidden').show();
   $(this).prevAll('.team-member img, .team-member-minor img').css('opacity','1');
});
4

2 回答 2

2

在您的“活动”状态下将 css 类（例如active）应用到.team-memberdiv，这样您就不必手动设置每个项目的不透明度。这也使事情变得更清洁，更易于维护。

编辑：我已经按照@Alexander 下面的建议更改了类名。http://jsfiddle.net/Lh6xU/这是他的小提琴

css

.team-member-minor img {
 opacity:.5; /* the default state for images; no need for jQuery */
}
.team-text {
display:none; 
}
/* "active" class */
.team-member-minor.active img {
opacity:1;
}

.active .team-text {
display:inline;
}

JS

$('.team-member-minor').on('click', function(){
     $(this)
      .addClass('active')
      .siblings('.team-member-minor')
      .removeClass('active');
}

// if a user "closes" the textbox, reset our team member

$('.team-text .close').click(function () {
   $(this).parent('.team-text').removeClass('active');
});
于 2013-03-11T20:05:44.093 回答
1

您可以将以下内容添加到.on('click')作品中.team-photo,.bio-button：

$('img').removeAttr('style');
$(this).find('img').css({opacity:1});

这将删除现有图像上的任何样式标记（通过更改其不透明度添加），然后将单击的不透明度设置img为 1。

要在关闭文本部分时重置不透明度，只需removeAttr('style');单击.close：

$('img').removeAttr('style');

我想这就是你想要的。我还更新了你的 jsFiddle。

于 2013-03-11T19:56:03.123 回答