CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Have <p> display on image hover (http://www.codingforums.com/showthread.php?t=274467)

Vytfla 09-27-2012 07:23 PM
Have <p> display on image hover
 
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
Code:
<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
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; 
}

fireplace_tea 09-28-2012 12:04 AM
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 09-28-2012 12:07 AM
Quote:
Originally Posted by fireplace_tea (Post 1274251)
What text are you trying to get the image to display on mouseover?
<p>Top</p>

Vytfla 09-28-2012 12:25 AM
Quote:
Originally Posted by fireplace_tea (Post 1274251)
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 09-28-2012 04:09 AM
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 09-28-2012 04:42 AM
The only way other than JavaScript is:

Code:
#footer-left:hover + p {
   
}

transybao 09-28-2012 04:58 AM
<a href="#"><img src="images/arrow.png" /></a>
CSS code:
Quote:
#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;
}
Quote:
#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 09-28-2012 07:04 AM
Quote:
Originally Posted by Sammy12 (Post 1274304)
The only way other than JavaScript is:

Code:
#footer-left:hover + p {
   
}

Sweet! That does work. You will only need to add the following code to your .css file:
Code:
#footer-left:hover + p {
    display: block;
}

Vytfla 09-30-2012 12:29 AM
Quote:
Originally Posted by Sammy12
Code:
#footer-left:hover + p {
   
}
This work, thanks!

jamaks 10-01-2012 12:03 AM
Hi, another way of doing the same thing, and minimising coding would be to add the title tag
Code:
<a href="#"><img src="images/arrow.png" title="Top" /></a>
Jim

Vytfla 10-01-2012 08:14 AM
Quote:
Originally Posted by jamaks (Post 1275066)
Hi, another way of doing the same thing, and minimising coding would be to add the title tag
Code:
<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 10-01-2012 11:08 AM
Hi, if you give an image a title then the title text is shown when you hover over the image. Jim

Vytfla 10-01-2012 04:21 PM
Solved- have <p> display on image hover
 
Quote:
Originally Posted by jamaks (Post 1275184)
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 10-01-2012 07:41 PM
Right enough, I misunderstood what you required to do. Always tend to go for simplest answer myself. Happy you got what you required. Jim


All times are GMT +1. The time now is 10:50 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.