Interference of effects Hover

Asked

Viewed 202 times

5

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

inserir a descrição da imagem aqui

When I give hover on these social media links, a div there in another part of the site loses its border-radius. Example:

inserir a descrição da imagem aqui

I have no idea what might be giving this interference, since each one of your class. Someone knows?

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

CSS of social media 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; }
  • The HTML is missing :)

  • All right, I put it there.

  • 1

    It looks like a Webkit bug. I saw it occur in Chrome and Safari, but not in Firefox.

  • Poisé. I will try to change slider plugin.. maybe it works. Some suggestion?

  • Ah, I hadn’t noticed that the plugin was in your jsfiddle. Without it it doesn’t actually occur. And even with it, it doesn’t occur to turn off the transition in the Hover of the other element. But I couldn’t figure out the exact cause.

Show 1 more comment

1 answer

1

Probably a badly closed div in the code, testing here in Jsfiddle, I realized that there are 2 closed Ivs at the end, while I took one and closed after the facebook code, and it was normal.

Era pra ser assim?

Imagem do JSFiddle

I closed the second div, which is after the facebook div on that part:

<div class="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.

  • Here all the divs are closed, weird. Even so, thanks. I ended up removing this effect. :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.