jQuery 鼠标悬停效果不起作用

Question

我正在学习 jQuery，但我被一段特定的代码困住了。 当我将鼠标悬停在另一个元素上时，我想更改元素的不透明度。 例如，我有一个主图像，它有一个不透明度为 0 的文本 div（类 .infocard），当我将鼠标悬停在不透明度变为 1 时，文本出现在图像的顶部。 现在使用 CSS 效果很好，没问题 - 当我将鼠标悬停在导航栏中的“关于”按钮上时，我想达到相同的效果。 我不能用 CSS 来做，因为元素不相关。 我原以为 jQuery 会非常简单，但我无法让它做我想做的事。 任何帮助，将不胜感激....

标记：

<div class="masthead">
        <div class="title">
            Make Up By Joey D
        </div>

        <div class="navbar">
            <ul class="navitems">
                <li id="home"><a href="index.html">HOME</a></li>
                <li id="services"><a href="services.html">SERVICES</a></li>
                <li id="portfolio"><a href="portfolio.html">PORTFOLIO</a></li>
                <li id="about"><a class="about" href="#">ABOUT</a></li>
                <li id="booking"><a href="booking.html">BOOKINGS</a></li>
            </ul>       
        </div><!--navbar-->

    </div><!--masthead-->

                <div class="content">
                    <div class="image">

                        <div class="infocard" id="card">
                                sample text

                        </div><!--infocard-->

                    </div><!--image-->

                </div><!--content-->

JS：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
<script type="text/javascript">
    $(document).ready(function(){ 

    $("#about").on("mouseover", function() {
        $(".infocard").css ({"opacity", "1"});

    });
});
</script>

CSS：

.infocard {
width: 100%;
height: 98%;
margin: auto;
padding-top: 1%;
font-size: 30pt;
text-align: center;
color: #fff;
background: 000;
background: rgba(0,0,50,0.3);
border-radius: 30px 50px;
opacity: 0; 
transition: opacity 0.5s ease-in-out;

我已经通过向所有 div 添加红色边框来测试是否正确设置了 jQuery（我在 google 上找到了该测试）并且它有效。 所以我的特定代码显然有问题！ 提前致谢！

Answer 1

$(".infocard").css ({"opacity", "1"}); 语法不正确。

应该是：

$(".infocard").css ("opacity", "1");

或者：

$(".infocard").css ({opacity: 1});

完整代码：

$(document).ready(function(){ 
    $("#about").on("mouseenter", function() {
        $(".infocard").css ("opacity", "1");
    });
});

小提琴： https : //jsfiddle.net/d3ozth1m/

Answer 2

代码应该是

$(".infocard").css ("opacity", "1");

如果您想更改多个属性，您可以执行以下操作：

$(".infocard").css ({"opacity": "1", "border":"1px solid black", "position":"relative"}); 等等。