Facebook/Twitter hover effect

compaqlaptop1

If you hover over a message on Facebook/Twitter the 'delete' or 'remove' link appears. I presumed this was done by javascript but after disabling javascript it still works. So how do they do this? How do they make these links appear when you hover over a message using only html?

synacron trion

I took a quick look at the source for my Twitter timeline. Looks like it is being done using CSS. There is a CSS class called actions-hover that might be what you are looking for.

compaqlaptop1

I know some css is being used but I cant see how it is being done without javascript. How is hovering over an outter element setting an inner element's visiblity?

Liam Byrne

compaqlaptop1 wrote: »

I know some css is being used but I cant see how it is being done without javascript. How is hovering over an outter element setting an inner element's visiblity?

At a guess :

a img {
 display:none;
}

a:hover img {
 display:block;
}

Bearing in mind positioning / size would need to be handled well in order for the content not to "jump", thereby screwing up the hover.

zoudards

Hey,
you can use the hover pseudo class on other elements, not just links.

http://www.w3schools.com/CSS/css_pseudo_classes.asp

Hope this helps
Z.