Javascript jQuery鼠标悬停效果不起作用

我正在学习jQuery，我被一段特定的代码困住了。我想在将鼠标移到另一个元素上时更改元素的不透明度。例如，我有一个主图像，它有一个不透明度为0的文本div（class.infocard），当我将鼠标悬停在不透明度变为1时，文本显示在图像顶部。现在，我想在导航栏中的“about”按钮上使用鼠标，实现同样的效果。我不能使用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-->

我已经通过向所有div添加一个红色边框（我在google上找到了这个测试），测试jQuery是否设置正确，并且可以正常工作。因此，我的特定代码显然有问题！提前谢谢

$（“.infocard”）.css（{“不透明”，“1”}）语法不正确

应为：

$（“.infocard”）.css（“不透明度”、“1”）

或：

$（“.infocard”）.css（{opacity:1}）

完整代码：

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

小提琴：
代码应该是

$（“.infocard”）.css（“不透明度”、“1”）

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

css（{“不透明”：“1”，“边框”：“1px纯黑”，“位置”：“相对”}）
等。
您是否尝试将
鼠标上方
替换为
悬停
和
$（“.infocard”）.css（{“不透明”，“1”}）由
$（“.infocard”）.css（“不透明度”，“1”）@如果我把{}拿出来，Markmouseover就行了。谢谢！！谢谢你的帮助。。。移除{}就成功了。太简单了！！我有很多东西要学！感谢您的帮助，花括号是罪魁祸首-谢谢您的快速回复：）
.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;

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