CODEWITHSUNDEEP
jqueryhtmlcss
Patrick McDermott
Patrick McDermott

Reputation: 1220

jQuery mouseover effect

I'm sure it is something simple I am missing out but I can't get this jQuery function to work. No errors are coming up in the console either. I want text to appear when a user hovers over the image. Any chance someone can spot what I am doing wrong?

HTML

 <div class="project-container">
     <img src="imgs/portfolio_hiburn.jpg">
          <div class="project-container__text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
              </p> 
          </div>
 </div>

CSS 

.project-container {
    width: 38.4688rem;
    height: 28.9rem;
    position: relative;
    overflow: hidden;
}

.project-container__text {
    padding: 2rem;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    background: #63b9ce; 
    color: #fff;
}

.project-display {
    display: inline;
    z-index: 1;
}

JQUERY

$(document).ready(function(){

    $('.project-container').mouseover(function(){
        $('.project-container__text').addClass(('.project-display'), function(){
            $('.project-display').slideUp();
        });
    });

});

Upvotes: 2

Views: 270

Answers (4)

Carlos Laspina
Carlos Laspina

Reputation: 2231

You must change the way CSS class assignment:

$(document).ready(function(){
    $('.project-container').mouseover(function(){
        $('.project-container__text').addClass('project-display');
        $('.project-display').slideUp();
    });
});

This is your code running in fiddle

You should consider that to apply a style class to a jquery item, you must have the following format

More than one class may be added at a time, separated by a space, to the set of matched elements, like so: $( "p" ).addClass( "myClass yourClass" );

This method is often used with .removeClass() to switch elements' classes from one to another, like so: $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added. As of jQuery 1.4, the .addClass() method's argument can receive a function.

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

Given an unordered list with two <li> elements, this example adds the class "item-0" to the first <li> and "item-1" to the second.

Reference: addClass Jquery Doumentation

Upvotes: 0

philippsh
philippsh

Reputation: 798

Here you go! The problem was you shouldnt add '.' when using addClass or removeClass function. Also would recommend using .on('mouseover') with callback.

https://jsbin.com/wowuyuzaqo/edit?html,css,js,output

Upvotes: 1

Jai
Jai

Reputation: 74738

remove the ( and a . from the adding class: 

.addClass('project-display'),

You have added an extra ( brace in addClass() method and this method does not accept any selector but a string value. So you don't have to put a . there.

and one thing to be added you have to get the element in the given context of the selector with this keyword: 

$(this).find('.project-container__text').addClass('project-display')

Upvotes: 1

rrk
rrk

Reputation: 15846

$(document).ready(function(){
    $('.project-container').mouseover(function(){
        $('.project-container__text', this)
            .addClass('project-display')
            .slideUp();
    });
});

Upvotes: 0

Related Questions