How did Qype do this Mouseover reveal?

An example would be a general review page:
http://www.qype.co.uk/place/95648-Paul-A-Young-Fine-Chocolates-London

Then when you put your mouseover the text, an offensive text comes up (and stays up) - how did they do that?

 

Not sure what are you referring. A screenshot would be great.

 

Here's a screenshot

 

I think visiblity is hidden and on mouse over it comes up.

 

Yep but what is the actual code, we're all CSS coders in this section...

Sofar I know it's:

.PlaceReviewV2 .ReportReview {
visibility: hidden;
}
.Right {
float: right;
}
.Grey {
color: #ADADAD;
}
.ReportReview a {
position: relative;
top: -20px;
}
.ReviewPermalink {
float: right;
left: -7px;
position: relative;
top: -17px;
visibility: hidden;
}


<SMALL class="Grey Right ReportReview">
<A href="#" rel=nofollow>Offensive content?</A></SMALL>
<A class="ReviewPermalink" href="#" rel="nofollow">
<IMG alt="Link_to_post_icn" src="paul_files/link_to_post_icn.png"></A>

 

Does anyone have any suggestions? thanks guys

 

This could be done simply with CSS pseudo classes, see this article:

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

 

I couldn't find any info on the site you gave?

 

Its the concept. :-/

Use a link and in the CSS, on the hover state change the visibility so you can see it, and in all the rest of the states, change visibility to none. Do you need code?

 

OK thanks mate...

I thought it would of been ok to solve with the code I had above, I used Firebug but still can't see how it appears when the mouse is over the text...

 

I actually just tried my theory, and I cant get it to work, seems when I set the property to hidden, it no longer detects my mouse over it. Weird. The other way would be to change your text color to the color of the background, but thats not very versatile. Maybe someone else can shed some light on this?

 

Make sure you change the text to hidden, not the entire element. Otherwise the element won't appear, and obviously your mouse won't be detected since there is nothing to detect. You need to make sure the stuff INSIDE the element is set to hidden.

 

Yep you're 100% correct, but how to actually do it? I used Firefox to find out the css, no JS is involved but still can't replicate it...driving me nuts!

 

Has anyone else suggestions on this - I saw someone posted the following but then deleted his or her post:

In the stylesheet qype_4_0_45630.css?45808

Code:
---------
.ReportReview{visibility:hidden;}.PlaceReviewV2:hover .ReportReview,.PlaceReviewV2:hover .ReviewPermalink{visibility:visible;}

 

@misohoni .. yep that code is the solution .... since .reportreview is a child class of placereviewv2 you can use css code like that.

 

yep, this should work

 

You can place a child element, like a span, inside an anchor which is hidden by default and set to display on the anchor's hover state. For example:

<div class="pop">
Text<span>Hidden stuff</span>
</div>

Code (markup):

div.pop span { display: none; }
div.pop:hover span { display: inline; }

Code (markup):

While this is a very crude and basic example, it should give you some ideas. Note that IE6 does not support the :hover state over non-anchor elements, so you can trick it by inserting the span into the anchor if needed.

 

here's an example using on css.
http://meyerweb.com/eric/css/edge/popups/demo.html

It's also easily done with a 2 lines of javascript if you want to go that route. (See sample. Not ideal because it's inline but you get the idea of functionality.)

<img src="image.gif onmouseover="document.getElementById('hiddenDiv').style.display = 'block'" onmouseout="document.getElementById('hiddenDiv').style.display = 'none'" />

Code (markup):

There are two ways it can be done using visibility or display.

"Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout."