Question

首先，我意识到这似乎已被多次询问过，而且我已经遵循了现有的建议，但无论如何都没有让它发挥作用。

请参阅此codepen以获取演示：http://codepen.io/anon/pen/nlGHo

我正在尝试在悬停另一个div时更改div的不透明度。在演示中，当悬停白色框时，右侧两个框的背景图片不透明度应该会改变。我的jQuery如下。 div .box-content是白色框，div .opacity为背景图像创建不透明度（不透明黑色叠加）。请参阅上面的演示以查看整个页面。目前白盒子悬停时没有任何反应。如果我是正确的，.next()应该定位下一个兄弟元素div .opacity。

$(document).ready(function () {
    $('.box-content').hover(function () {
        $(this).next().css('opacity', '0.2');
    }, function () {
        $(this).next().css('opacity', '0.5');
    });
});

HTML：

<div class="menu-wrapper">
    <div class="menu">
        <ul>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Vision</a>
            </li>
            <li><a href="#">Mission</a>
            </li>
            <li><a href="#">Survey</a>
            </li>
        </ul>
    </div>
    <hr>
    <div class="footer">
        <hr>
        <br>
        <br>
        <ul class="contacts">
            <li>COMPANY NAME</li>
            <li>+1 336 123 4567</li>
            <li>company@email.com</li>
            <li>1709 address avenue</li>
        </ul>
     </div>
</div>
<div class="content-wrapper">
    <div class="box">
        <div class="box-content">
            <div class="pic"></div>
        </div>
        <div class="opacity"></div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="pic"></div>
        </div>
    </div>
</div>

Answer 1

在您的演示中，体验双方的HTML并不相似。在左边的那个中，你有一个DIV，其中有一个'不透明度'，但不在右边。如果您将DIV添加到右侧，您将看到双方都发生了这种效果。

将鼠标悬停在左侧白色DIV上会影响左侧，并将鼠标悬停在右侧白色DIV上方会影响右侧。无需更改任何JavaScript，您的HTML将如下所示：

<div class="menu-wrapper">
<div class="menu">
    <ul>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Vision</a>
        </li>
        <li><a href="#">Mission</a>
        </li>
        <li><a href="#">Survey</a>
        </li>
    </ul>
</div>
<hr>
<div class="footer">
    <hr>
    <br>
    <br>
    <ul class="contacts">
        <li>COMPANY NAME</li>
        <li>+1 336 123 4567</li>
        <li>company@email.com</li>
        <li>1709 address avenue</li>
    </ul>
 </div>
</div>
<div class="content-wrapper">
    <div class="box">
        <div class="box-content">
            <div class="pic"></div>
        </div>
        <div class="opacity"></div>
    </div>
    <div class="box">
        <div class="box-content">
            <div class="pic"></div>
        </div>
        <div class="opacity"></div>
    </div>
</div>

Answer 2

在您的codepen中，您没有加载jQuery。在这个jsfiddle中它起作用：

//Load jquery before
$(document).ready(function () {
$('.box-content').hover(function () {
    $(this).next().css('opacity', '0.2');
}, function () {
    $(this).next().css('opacity', '0.5');
});

}）;

jsFiddle

问候。

jQuery悬停一个元素，改变另一个不工作的css

2 个答案: