在悬停jQuery上更改不透明度

Question

我一直试图让它成为当你将鼠标悬停在盒子中的任何部分上时,盒子悬停(div)将淡化到不透明度0.7,这样它看起来大部分是黑色但很透明.但我所做的一切都在努力.而且我不想为它分配ID,因为会有更多的盒子.

这是我想要的代码:http://pastebin.com/3ZRcrx57

谢谢

Answer 1

首先,你的.box-hover元素是一个孩子,而不是一个兄弟,所以next()不会工作,你将不得不使用find()或children().

其次,写javascript的时候确实很重要,而且它fadeIn和fadeOut(通知大写字母)

我想这就是你要做的事情:

$(".box").hover(function () {
    $(this).find('.box-hover').fadeIn(100);
},
function () {
    $(this).find('.box-hover').fadeOut(100);
});?

这是演示

您甚至可以将其缩短为:

$(".box").on('mouseenter mouseleave', function () {
    $(this).find('.box-hover').fadeToggle(100);
});?

DEMO

Answer 2

只是为它的不透明度设置动画,默认情况下将其设置为0.

$(".box").hover(function () {
   $(this).animate({'opacity':'0.7'}, 100);
},
function (){
   $(this).animate({'opacity':'0'}, 100);
});?