Have <p> display on image hover

[Vytfla]

I may be missing something glaringly easy, but for some reason I cannot get my text to display when I hover over an image.

HTML

<div id="footer"> 
        <div id="footer-left">
            <a href="#"><img src="images/arrow.png" /></a>
        </div> 
        
        <p>Top</p>
        
        <div id="footer-right">
        
        </div> 
    </div>

CSS

#footer {
    overflow: hidden;       /* Clears floats */
    margin: 0 -2000px;      /* This extends header the width of the viewport */
    padding: 0 2000px 3em;       /* This extends header the width of the viewport */
    background-color: #4B4A4C;
}

#footer-left {
    float: left;
    margin: 2em 0 0 2em;
}

#footer-left img:hover {
   display: inline;
}

#footer p {
    display: none;
    margin: 0 0 0 .6em;
    line-height: 5em;
    text-transform: lowercase;
    color: #FF6400;
}

#footer-right {
    float: right;   
}

[fireplace_tea]

I like to use JavaScript to tell the browser that when I mouse over the photo I would like to unhide the text. Here is what I would code:

HTML:
<div id="footer-left">
<a href="#"><img src="images/arrow.png" id="myimage" /></a>
</div>
<p id="showme">Top</p>

JAVASCRIPT:
var image = document.getElementById('myimage');
var show = document.getElementById('showme');
image.onmouseover = function(){
show.style.display = "block";
};
image.onmouseout = function(){
show.style.display = "none";
};

[Vytfla]

Originally Posted by fireplace_tea

What text are you trying to get the image to display on mouseover?

<p>Top</p>

[Vytfla]

Originally Posted by fireplace_tea

I like to use JavaScript to tell the browser that when I mouse over the photo I would like to unhide the text. Here is what I would code:

HTML:
<div id="footer-left">
<a href="#"><img src="images/arrow.png" id="myimage" /></a>
</div>
<p id="showme">Top</p>

JAVASCRIPT:
var image = document.getElementById('myimage');
var show = document.getElementById('showme');
image.onmouseover = function(){
show.style.display = "block";
};
image.onmouseout = function(){
show.style.display = "none";
};

Is there no way to do it via CSS only?

[fireplace_tea]

Hmmm...I doubled checked and from what I can tell there is no way to do what you wanna do using CSS only. In order for CSS to do what you are wanting it to do one selector would need to be able to tell another selector what to do, and I'm pretty sure CSS doesn't work that way. However, JavaScript and/or JQuery can do what you are asking for.

[Sammy12]

The only way other than JavaScript is:

#footer-left:hover + p {
    
}

[transybao]

<a href="#"><img src="images/arrow.png" /></a>
CSS code:

#footer {
overflow: hidden; /* Clears floats */
margin: 0 -2000px; /* This extends header the width of the viewport */
padding: 0 2000px 3em; /* This extends header the width of the viewport */
background-color: #4B4A4C;
}

#footer-left {
float: left;
margin: 2em 0 0 2em;
}

#footer-left img:hover {
display: inline;
}

#footer p {
display: none;
margin: 0 0 0 .6em;
line-height: 5em;
text-transform: lowercase;
color: #FF6400;
}

#footer-right {
float: right;
}

#footer {
overflow: hidden; /* Clears floats */
margin: 0 -2000px; /* This extends header the width of the viewport */
padding: 0 2000px 3em; /* This extends header the width of the viewport */
background-color: #4B4A4C;
}

#footer-left {
float: left;
margin: 2em 0 0 2em;
}

#footer-left a:hover {
display: inline;
}

#footer p {
display: none;
margin: 0 0 0 .6em;
line-height: 5em;
text-transform: lowercase;
color: #FF6400;
}

#footer-right {
float: right;
}

[fireplace_tea]

Originally Posted by Sammy12

The only way other than JavaScript is:

#footer-left:hover + p {
    
}

Sweet! That does work. You will only need to add the following code to your .css file:

#footer-left:hover + p {
    display: block;
}

[Vytfla]

Originally Posted by Sammy12

#footer-left:hover + p {
    
}

This work, thanks!

[jamaks]

Hi, another way of doing the same thing, and minimising coding would be to add the title tag

<a href="#"><img src="images/arrow.png" title="Top" /></a>

Jim

[Vytfla]

Originally Posted by jamaks

Hi, another way of doing the same thing, and minimising coding would be to add the title tag

<a href="#"><img src="images/arrow.png" title="Top" /></a>

Jim

The issue wasn't getting it to actually jumpto the top, it was displaying the text when someone hovered over the image (via CSS)

[jamaks]

Hi, if you give an image a title then the title text is shown when you hover over the image. Jim

[Vytfla]

Originally Posted by jamaks

Hi, if you give an image a title then the title text is shown when you hover over the image. Jim

Ah, you're misunderstand my problem; I was looking to have text next to an image (or somewhere else on the page, for example) display when the image is hovered over.

[jamaks]

Right enough, I misunderstood what you required to do. Always tend to go for simplest answer myself. Happy you got what you required. Jim