Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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;   
    }

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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";
    };
    Last edited by fireplace_tea; 09-28-2012 at 12:19 AM.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fireplace_tea View Post
    What text are you trying to get the image to display on mouseover?
    <p>Top</p>

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fireplace_tea View Post
    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?

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    The only way other than JavaScript is:

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

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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;
    }

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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;
    }

  • #9
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12
    Code:
    #footer-left:hover + p {
        
    }
    This work, thanks!
    Last edited by Vytfla; 09-30-2012 at 01:01 AM.

  • #10
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    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

  • #11
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jamaks View Post
    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)

  • #12
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Hi, if you give an image a title then the title text is shown when you hover over the image. Jim

  • #13
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Solved- have <p> display on image hover

    Quote Originally Posted by jamaks View Post
    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.
    Last edited by Vytfla; 10-01-2012 at 05:27 PM.

  • #14
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Right enough, I misunderstood what you required to do. Always tend to go for simplest answer myself. Happy you got what you required. Jim


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •