javascript - 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("不透明度","1");

或者:

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

完整代码:

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

fiddle :https://jsfiddle.net/d3ozth1m/