jQuery эффект mouseover не работает

Question

Я в процессе обучения jQuery, и я застрял в определенном фрагменте кода. Я хочу изменить непрозрачность элемента при наведении мыши на другой элемент. Например, у меня есть основное изображение, которое имеет текстовый div (класс .infocard) с непрозрачностью 0, когда я наводил курсор на непрозрачность на 1, и текст появляется поверх изображения. Это отлично работает с CSS, никаких проблем, СЕЙЧАС - я хочу добиться такого же эффекта, когда я нажимаю кнопку «about» в моей навигационной панели. Я не могу сделать это с помощью CSS, поскольку элементы не связаны. Я думал, что jQuery будет довольно прямолинейным, но я не могу заставить его делать то, что я хочу. Любая помощь будет оценена ....

Марк 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; 

Я проверил, что JQuery является правильно настроившись, добавив красную границу ко всем div (я нашел тест в 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"); 
    }); 
}); 

Fiddle: https://jsfiddle.net/d3ozth1m/

Answer 2

Код должен быть

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

, если вы хотите изменить более чем один атрибут можно сделать:

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