CODEWITHSUNDEEP
javascriptjquerymouseovereffectsjquery-effects
Mark
Mark

Reputation: 11

jQuery mouseover effect not working

I'm in the process of learning jQuery and I am stuck with a particular piece of code. I want to change the opacity of an element when I mouseover another element. For example, I have a main image which has a text div (class .infocard) with opacity 0, when I mouseover the opacity changes to 1 and the text appears on top of the image. Got this working great with CSS, no problems, NOW - I want to achieve the same effect when I mouse over the "about" button in my nav bar. I can't do it with CSS as the elements are not related. I had thought the jQuery would be pretty straight forward but I can't get it to do what I want. Any help would be appreciated....

The 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-->

The 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>

The 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;

I have tested that jQuery is set up properly by adding a red border to all divs (I found the test on google) and it works. So there is obviously something wrong with my particular code! Thanks in advance!

Upvotes: 1

Views: 426

Answers (2)

ST80
ST80

Reputation: 3903

The code should be

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

if you want to change more than one attribute you could do:

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

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

$(".infocard").css ({"opacity", "1"}); syntax is incorrect.

Should be either:

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

or:

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

Full code:

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

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

Upvotes: 1

Related Questions