Help - Search - Members - Calendar
Full Version: HELP with CSS and links inside HOVER
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
I am at a loss.. TWO DAYS studying and nowhere can i find where I can make a SPAN be a usable clickable link after the HOVER displays the block.

<a class="hideDisplay">
<img src="/EdenWeb/images/Citysiteicon.jpg" width="20" height="20" alt="symbol">City of Miami Beach
<a href="">
<span class="showDisplayOnHover">Heading

I have put the <A> tag inside and outside the span, and it immediately displays the word "Heading" nullifying the display:none until I hover, but when I remove it then it behaves as a block that displays after I hover.
What is needed to have a DIV that when I hover over it, the span displays and is a clickable link?
Some sites had the span visible and the DIV is what is set to display:none until one hovers, but it also wouldn't work as a clickable link nesting an anchor tag

My goal is to have a City's name and when you hover it you get two options to click on immediately below the city name. The live site and the internal test site. (I work for a site that develops websites for city government use. )

This is the last CSS with the above HTML, but I cannot get any link to work. except of course the obvious for the image that is an Anchor. But its not within a hover "element" is it called?

position: relative; /* This makes everything work.*/
/* Allows you to layer overlapping elements. */
z-index: 20;
color: #000;
text-decoration: none

/* Allows you to layer overlapping elements. */
z-index: 30;

a.hideDisplay span.showDisplayOnHover{
display: none

/* This will only display itself when the
* user hovers the mouse over the anchor. */
a.hideDisplay:hover span.showDisplayOnHover{
display: block;
position: absolute;
font-size: 10px;

/* This sets the height of a line of text in the box. */
line-height: 10px;

/* These position the box where it needs to go. */
top: 10px;
left: 20px;

/* These adjust the size of the box when it appears. */
width: 250px;
padding: 2px;

border: 1px solid #666666;
background-color: #c0cedd;

/* text color */
color: #000000;
text-align: left;

span.showDisplayOnOnHover {
font-size: 10px;
font-weight: normal;
color: #444;
line-height: 10px;

Christian J
You can't nest links. Instead, try using e.g. a DIV as the outer container and apply the :hover to it.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.