web-dev-qa-db-ja.com

リンクホバーCSSに画像を表示する

私はこれ、おそらく簡単なソリューションで作業していますが、この特定の問題に関連するstackoverflowまたはインターネットに関するヘルプを見つけることができませんでした。

メニューがあります。リンクの下に画像を表示するか、リンクの上に画像を表示します。これがCSSで行えることを願っています。これはこれまでの私のコードです。

HTML

<html>
    <head>
        <title></title>

        <link rel="stylesheet" type="text/css" href="startpage.css">


        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
     <div id="wrapper">


         <img id="baggrund" width="166" height="327" alt="back image" src="images/laerkeryg.jpg"/>
         <img id="cirkler" width="319" height="249" alt="circles" src="images/circles.PNG"/>
         <div id="header">/jacob gerlif pilegaard/</div>
         <div id="underheader">portfolio</div>   
          <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
            </ul> 
         </div>
     <img id="menucircle" width="50" height="50" alt="menu circle" src="images/circle.PNG"/>
          </body>
</html>

これがこれまでのCSSです。

a:hover
{
    background-image: url('image/circle.PNG');
    background-repeat: no-repeat;
}

皆さんが私を助けてくれることを願っています！

cssimagehyperlinkhover
10
Jacob

それに対処するクリーンな方法は、:after疑似要素を使用することです

a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
}

DOMに画像が存在する必要さえありません。
画像へのパスは、HTMLファイルではなく、CSSファイルからの相対パスであることも忘れないでください。

もちろん、画像はプッシュアンカーの下のコンテンツを下に移動します。これを回避するには、次を試してください。

a:hover {
    position: relative;
}
a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
    position: absolute;
    left: 123px; /* change this value to one that suits you */
    top: 56px; /* change this value to one that suits you */
}
24
matewka

画像を入れてみてくださいwithin hrefと 'display：none'のスタイルを与えてください

次に：

a:hover img{ display: block; }

にカーソルを合わせると画像が表示されます

3
Pat Dobson

背景画像の場合、アンカーに幅、高さ（または関連するパディング）を与え、ブロックとして表示する必要があります。

a:hover
{
    background-image: url('image/circle.PNG');
    background-repeat: no-repeat;
    background-position: center bottom;
    height:20px
    width:100px;
    display:block;
}
1
Dale