Question

我正在学习jQuery，我遇到了一段特定的代码。当我将鼠标悬停在另一个元素上时，我想改变元素的不透明度。例如，我有一个主图像有一个文本div（类.infocard）与不透明度0，当我鼠标悬停不透明度变为1并且文本出现在图像的顶部。使用CSS可以很好地工作，没问题，现在 - 当我将鼠标悬停在导航栏中的“关于”按钮时，我希望达到相同的效果。我不能用CSS做，因为元素不相关。我曾经认为jQuery会非常直接，但我不能让它做我想做的事。任何帮助将不胜感激....

Mark Up：

<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添加红色边框（我在google上找到了测试）测试了jQuery的设置是否合适，并且它可以正常工作。所以我的特定代码显然有问题！提前谢谢！

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"});等。

jQuery鼠标悬停效果不起作用

2 个答案: