CODEWITHSUNDEEP
csshoverhtml
twcool
twcool

Reputation: 35

How would I show text inside a span tag when hovering over a different element?

I have a webpage set up that has multiple DIV tags in a grid like table. I would like to know if it's possible by using CSS to show text when mousing over a DIV or IMG or A tag. I could use any of those 3 to make it happen since one of my DIV tags holds just the IMG which is also a hyperlink to a new page. A sample of one of my rows in my page is setup kinda like this:

    <div class="Home-06">
    <a href="image1link.html">
    <img src="images/image1.jpg" width="250" height="250" alt="" 
        style="border-width: 0px"></a>
</div>
<div class="Home-07">
    <span>Text for Image 1</span><span>Text for Image 2</span>
</div>
<div class="Home-08">
    <a href="image2link.html">
    <img src="images/image2.jpg" width="250" height="250" alt="" 
        style="border-width: 0px"></a>
</div>

I'd like to make the middle DIV "Home-07" with my span tags display different text when hovering over "Home-06" and "Home-08".

My CSS:

div.Home-06 {
position:absolute;
left:102px;
top:450px;
width:250px;
height:250px;
}
div.Home-07 {
position:absolute;
left:352px;
top:450px;
width:320px;
height:250px;
background-color:#000000;
}
div.Home-08 {
position:absolute;
left:672px;
top:450px;
width:250px;
height:250px;
}

Upvotes: 2

Views: 11598

Answers (2)

Christian Bonato
Christian Bonato

Reputation: 1306

Use JQuery, with hover : http://api.jquery.com/hover/ Look for the demo.

Upvotes: 0

Niffler
Niffler

Reputation: 1710

The easiest way to do this is if the span is contained within the element that you are hovering over, so for example:

<div class="alwaysshowme">
    <p>
        I can always be seen [hover over me!]
        <span class="showmeonhover"><br />I can only be seen on hover...</span>
    </p>
</div>

Then the CSS would be:

.showmeonhover { display: none; }
.alwaysshowme:hover .showmeonhover {
    display: inline;
}

Here's a fiddle: http://jsfiddle.net/Niffler/d2kYq/

Upvotes: 3

Related Questions