0

I have the following code which is supposed to show the content of a paragraph but it doesn't work:

jQuery

 <script>
 $(document).ready(function () {
     $('.portfolio-excerpt').hover(function () {
         $('.portfolio-text').addClass('portfolio-hover')
     },
     function () {
         $('.portfolio-text').removeClass('portfolio-hover')
     })
 })
 </script>

HTML

<div class="portfolio-img"> <a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a>
    <p class="portfolio-excerpt">They say the only thing better.</p>
    <p class="portfolio-text">Lorem ipsum</p>
</div>

CSS

.portfolio-hover {
    display:block;
}
p.portfolio-excerpt {
    display:block;
    height:30px;
    width:auto;
}
p.portfolio-text {
    display:none;
}

which is not working and I don't know why. Can you help?

j08691
  • 204,283
  • 31
  • 260
  • 272
Andra Vilcu
  • 13
  • 1
  • 7

6 Answers6

1

Include the p tag to up the specificity as .class is less specific than tag.class.

p.portfolio-excerpt {
    display:block;
    height:30px;
    width:auto;
}
p.portfolio-text {
    display:none;
}
p.portfolio-hover {
    display:block;
}

The other way is to remove the p from the others, if it's not needed.

In addition, you could update your CSS so it's a bit more specific (using multiple classes):

.portfolio-text.portfolio-hover {
     display:block;
}

You could also "force" it by using important.

.portfolio-hover {
     display:block !important;
}

If neither of those will work, reconsider your ordering (hey, some people hate important or .multi.classnames - I get that).

Finally, you can toggle the existing class using toggleClass.

$(this).next().toggleClass('portfolio-text');

Here's an example: http://jsfiddle.net/neknhp8p/

Jack
  • 9,151
  • 2
  • 32
  • 44
  • 1
    +1, but to be more precise, `toggleClass` doesn't remove a class but `toggles` it instead ; meaning, it adds it if it's missing, and removes it if it's found. – php-dev Sep 22 '14 at 16:55
1

All you need to do is changing your CSS declaration. 

p.portfolio-text{
    display:none;
    }

p.portfolio-excerpt{
    display:block;
    height:30px;
    width:auto;
}

p.portfolio-hover{
    display:block;
}

Here is working page --> JSFIDDLE

You forgot about adding p before .portfolio-hover and just put it on the end of the styles. Thats all.

Kamil
  • 1,987
  • 16
  • 14
  • Your script is working but then when I try to remove the excerpt when the text shows and the put it back on on mouse leave it still doesn't work for me, what am I doing wrong? Here's the fiddle http://jsfiddle.net/51ywny19/16/ – Andra Vilcu Sep 22 '14 at 17:07
  • As i understand you just want to hide one element and show another one at the same place? Maybe just try this code and remove all your classes which are not necessary anymore [JSFIDDLE](http://jsfiddle.net/51ywny19/23/) – Kamil Sep 22 '14 at 17:20
  • Thank you very much! This code is great and I thought about it too but since am I noob with jquery I wanted to do it this way to see how it works and it doesn't. Do you know why it isn't working though? Thank you again! – Andra Vilcu Sep 22 '14 at 17:23
  • It wasn't work well because the `hover` event was on element which got `display:none` property so you know, it might be the problem, but i'm glad it works now :D – Kamil Sep 22 '14 at 17:34
1

A couple of related things - it's your css.

Firstly the order:

.portfolio-hover {
    display:block;
}
/* this comes later in the css, it will override the hover */
p.portfolio-text {
    display:none;
}

So fix it as such:

p.portfolio-text {
    display:none;
}
.portfolio-hover {
    display:block;
}

However p.portfolio-text is more specific than .portfolio-hover so will still be overridden - final fix is thus:

p.portfolio-text {
    display:none;
}
p.portfolio-hover {
    display:block;
}
James Thorpe
  • 31,411
  • 5
  • 72
  • 93
0

Try this:

$(document).ready(function () {
    $('.portfolio-excerpt').hover(function () {
        $(this).next().addClass('portfolio-hover')
    },
    function () {
        $(this).next().removeClass('portfolio-hover')
    })
})

or just use .show() and .hide():

$(document).ready(function () {
    $('.portfolio-excerpt').hover(function () {
        $(this).next().show();
    },
    function () {
        $(this).next().hide();
    })
})

Fiddle Demo

user3705773
  • 97
  • 2
  • 8
0

The problem is how CSS's styles are applied, in that the one class's definition isn't overriding the other. Change your styles like so:

.portfolio-hover {
    display:block !important;
}

Alternatively, you can just be more specific with the selector's definition:

.portfolio-text.portfolio-hover {
    display:block;
}
/** OR **/
p.portfolio-hover {
    display:block;
}

Explanation:

Having an element where class="classA classB" where the css is:

.classA {
    css-property: css-value1;
}

.classB {
    css-property: css-value2;
}

Will result in classA's css-property taking precedence over classB's because of the ordering in the class property on the element. It's fixed by implementing the style in a way where one overrides the other. See here for more information on CSS precedence.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
0

Please wrap the two paragraphs together with another div to unsure the disappear will be smooth.

toggle function changes display from none to block and from block to none to all p tags inside sss div.

HTML:

<div class="portfolio-img"> <a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a>
    <div class="sss">
        <p class="portfolio-excerpt">They say the only thing better.</p>
        <p class="portfolio-text">Lorem ipsum</p>
    </div>
</div>

JS:

<script>
    $(document).ready(function () {
         $('.sss').hover(function () {
             $('.sss').children('p').toggle();
         });
    });
</script>

CSS:

<style>
.portfolio-hover, .portfolio-text {
    display:block;
}
p.portfolio-excerpt {
    display:block;
    height:30px;
    width:auto;
}
p.portfolio-text {
    display:none;
}
</style>
eitank
  • 330
  • 1
  • 5