CODEWITHSUNDEEP
jquerycsstransition
Jack Maessen
Jack Maessen

Reputation: 1864

why anchor for sliding-in div does not work when text inside the div

I have an anchor and when click on it, a div with classbox is sliding in. This works perfect without text inside the div. but when i put some text inside the div, the anchor does not work anymore. Can someone tell me what i am doing wrong?

html:

<a class="slide" href="#">Slide Out</a>

<div id="fade-in" class="box"></div>

Css:

a {
  text-decoration: none;
  background: #009de1;
  cursor: pointer; 
  float: right;
  color: #fff;

}

.box {
   display: block;
    background: #009de1;  
    float: right;
    color: #fff;
 }

 #fade-in {
    height: 20px;
    width: 1px;
    opacity: 0;
    transition: all .75s ease;  
 }

 #fade-in.show {
    opacity: 1;
    height: 20px;
    width: 200px;

 }

the js:

$('.slide').on('click', function(){
   $('#fade-in').toggleClass('show');
});

Here is the fiddle without text. You can see the anchor works https://jsfiddle.net/94uhxjgk/41/

And here i have put some text inside the div and the anchor is not working anymore https://jsfiddle.net/94uhxjgk/43/

Upvotes: 0

Views: 34

Answers (1)

Renzo Calla
Renzo Calla

Reputation: 7706

This is happening because since your text is to large it is getting over your click area so it never triggers the click event, to fix this you can add 

#fade-in{
....
overflow:hidden;
}

fiddle

Edit

Since the content of your element is bigger than the width..enter image description here

The content is render over your Slide Out element, you can't see it because it has opacity set to 0.. so you will actually click the text, and not the Slide Out element.. Overflow hidden.. actually clips the overflow text in that way you are able to click the Slide Out.

Upvotes: 1

Related Questions