CSS: image link, change on hover

前端 未结 8 2133
故里飘歌
故里飘歌 2020-11-29 17:48

I have an image that is a link. I want to show a different image when the user hovers over the link.

Currently I\'m using this code:



        
相关标签:
8条回答
  • 2020-11-29 18:30
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/pic.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/anotherpic.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>       
    
    0 讨论(0)
  • 2020-11-29 18:31

    If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.

    You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.

    <a href="" class="myImage"><!----></a>
    
    
        <style>
          .myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
    .myImage:hover{background-image(image_hover.png);}
        </style>
    
    0 讨论(0)
  • 2020-11-29 18:32
     <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>
    

    use a class for the link itself and forget the div

    .twitterbird {
     margin-bottom: 10px;
     width: 160px;
     height:160px;
     display:block;
     background:transparent url('twitterbird.png') center top no-repeat;
    }
    
    .twitterbird:hover {
       background-image: url('twitterbird_hover.png');
    }
    
    0 讨论(0)
  • 2020-11-29 18:32

    It can be better if you set the a element in this way

    display:block;
    

    and then by css sprites set your over background

    Edit: check this example out http://jsfiddle.net/steweb/dTwtk/

    0 讨论(0)
  • 2020-11-29 18:36

    You could do the following, without needing CSS...

    <a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>
    

    Example: https://jsfiddle.net/jord8on/k1zsfqyk/

    This solution was PERFECT for my needs! I found this solution here.

    Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.

    0 讨论(0)
  • 2020-11-29 18:44

    The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.

    What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.

    <a href="/settings">
        <img class="default" src="settings-default.svg"/>
        <img class="hover" src="settings-hover.svg"/>
        <span>Settings</span>
    </a>
    
    a img.hover {
        display: none;
    }
    a img.default {
        display: inherit;
    }
    a:hover img.hover {
        display: inherit;
    }
    a:hover img.default {
        display: none;
    }
    
    0 讨论(0)
提交回复
热议问题