Hover Effects Interference

Question

Hover Effects Interference

Navigation

#1 by (1 votes)

5

I am facing a strange problem. I have some links to social networks with border-radius and with hover of edge rotation, as in the image below:

WhenIgivehovertothesesocialnetworklinks,adivthereonanotherpartofthesitelosesitsborder-radius.Example:

I have no idea what this interference might be, as each one of you is your class. Anyone know?

Online preview . (I believe the problem is in the slider plugin - Cycle2)

CSS for social networking links:

.link-social { width:31px; height:31px; display:inline-block; }
.link-social:before {
display:block; content:""; width:31; height:31px; border:1px #DF9201 solid;
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}
.link-social:hover:before {
border:1px #DF9201 dashed; 
transform:rotate(36000deg); -webkit-transform:rotate(36000deg); -moz-transform:rotate(36000deg);
transition: all 500s ease; -webkit-transition: all 500s ease; -moz-transition: all 500s ease; -o-transition: all 500s ease;
}

CSS of the round div:

.shape-slideshow { width:617px; height:617px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; overflow:hidden; }

html css

asked by anonymous 16.01.2015 / 16:24

1 answer

Max Array size passed by POST How to alphabetize a select obtained through a JSON?

score 1 · Answer 1

It's probably a badly closed div in the code, testing here in JSFiddle, I noticed that there are 2 divs closed at the end, while I took one and closed it after the facebook code, and it became normal.

Era pra ser assim?

Iclosedtheseconddiv,whichisafterthefacebookdivinthispart:

<divclass="cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="10000" data-cycle-pager=".slide-pager"></div>

If this is the case, the error occurs because one div was paired with the other causing the same effect on the other, since one had a different class, they come together and form a single effect in most cases.