Show/hide span with <a href>

HTML & CSS
1

Hello all - first off, sorry if this is in the wrong thread - mods, please move it if it is.

I have an <a href> that encompasses a couple of <span>s so when I roll over the <a href> the <span>s cange background colour.

Is there a way, where I can rollover the <a href> and have a span that was previously hidden appear?

I’m wanting a span with a checkbox to appear when I rollover the <a href>.

Does this make sense?

2

How you do it depends on your html. You could do it with just html and css or you might need some javascript.

Can you post your html and describe what elements you want to appear and when.

3

Cheers guys - I actually went back and redesiged the page as the layout wasn’t working for me.

Took your advice on board though. Thanks :slight_smile:

4

A couple of queries :confused:

1- Does the <a> have to be an <a>. Unless you want to navigate to somewhere when the <a> is clicked, I would just make it a <div> instead and that solves your problem when the exposed checkbox is clicked.

2- you could probably ditch the <span> around the <label> and give the <label> the add-to-scrapbook class name.

Then you should be right given

I’ve got it to appear/disapear using CSS…

5

The OP might have used an <a> so that, with CSS, it works with the keyboard too. That’s the only reason I use an anchor, otherwise JS would be required to work with keyboard :frowning:

6

I use this CSS technique on help text in my forms. But if you are clicking on these things then you have an issue.

If you want the span to be visible on click, in all browsers, then as webdev1958 mentions you will need Javascript. Without Javascript, you can get the span to appear onscreen in everyone but Chrome and Safari on click, because when you click you leave the :focus on the anchor which shows the span along with :hover.

<a href=“#void”><span>here’s some text</span></a>

a {
position: relative;
}

a span {
position: absolute;
margin-left: -999em;
other styles here, like width etc;
}

a:focus span, a:hover span {
margin-left: 0; /or wherever you want it/
}

That’s the basics of it.

I’ve got it to appear/disapear using CSS when you mouseover the <a href> but as the <a href> surrounds it, when I click on the checkbox it selects the <a href>…

I use Javascript to hide/show parts of forms, since yeah you do not want a form control inside an anchor like that. In the link above, an entire fieldset is brought onscreen if you choose “Ja” on the “Jongere bestuurder?” question.

7

OK - here goes:

<div class="product">
	<a href="#" class="product-link" title="buy Product Title" rel="external">
		<span class="add-to-scrapbook">
			<label for="scrapbook">
				<input name="" type="checkbox" value="" />add to my scrapbook
			</label>
		</span>
		<span class="product-image">
			<img src="../_assets/_graphics/dummy-products/09.png" alt="Product Title" border="0" />
		</span>
		<span class="prodname">Product Name</span>
		<span class="price">£99.99</span>
		<span class="buyfrom">Buy from<br /> Online Shop Name</span>
	</a>
</div>

The span class ‘add-to-scrapbook’ needs to be hidden but appear on mouseover.

I’ve got it to appear/disapear using CSS when you mouseover the <a href> but as the <a href> surrounds it, when I click on the checkbox it selects the <a href>…

…looking at the code anew I probably don’t even need a span ‘add-to-scrapbook’ - just style the label - but thats another issue.