1

元の画像の上にカーソルを置いたときに表示される別の画像を作成するのに問題があります。リストされたボタンの残りのない私のコードは次のとおりです。

<nav class="buttons">
<ul>
    <li class="left">
    <a class="home" href="www.google.com">
    <img src="img/Home_2.png"></a></li>
</ul>
</nav>

CSS:

.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}

.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}

助言がありますか？

編集：素晴らしい提案ですが、「ホームボタン」にカーソルを合わせると、フロート内のものがすぐに表示されます。完全な浮動小数点プロパティを持つコードは次のとおりです。

HTML:

<nav class="buttons">
<ul>
    <li class="left">
    <a class="home" href="www.google.com">
    <img src="img/Home_2.png"></a></li>

    <li class="left">
    <a href="www.google.com" class="menu">
    <img src="img/Menu_2.png"></a></li>

    <li class="right">
    <a href="www.google.com" class="about">
    <img src="img/About_2.png"></a></li>

    <li class="right">
    <a href="www.google.com" class="contact">
    <img src="img/Contact_2.png"></a></li>
</ul>
</nav>

CSS:

.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}

.left{float:left}
.home:hover img{display:none} 
.home:hover {background: url(../img/Home_crack.PNG);}

.right{float:right}

基本的に私は4つのボタンを分離したかった....左のフロートに1つ、右のフロートに1つ、そしてホバーすると、ボタンは別の画像に変わる....新しいimg {display：none}で左フロートが急速に点滅します。

4

4 に答える 4

2

別のimgonが必要な場合は、疑似要素を使用して.:hoverを追加できます。:afterbackground-image

このアプローチは、動的imgディメンションに適しています。

ここで jsFiddle - の異なるにimg表示されます。:hovera

a:hover:after {
    content: "\A";
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: url('http://...');
    top: 0px;
    left: 0px;
}
于 2013-10-21T21:41:25.050 に答える
0

ここにいる他のすべての人に加えて、これをcssに追加するように言っています:

.home:hover img { display: none }

また、背景を配置するタグに高さと幅を追加する必要があります。そうしないと、タグにコンテンツがなく、まったく表示されません。

.home:hover {
   background: url(../img/Home_crack.PNG)
   width: [enter the width of the bg image];
   height: [enter the height of the bg image];
}
于 2013-10-21T21:39:41.210 に答える
0

タグの背景を変更していますが、<a>たまたま完全に<img>. そのため、img が背景を完全に覆っているため、背景は実質的に見えません。を入れてみてください

.home:hover img { display: none }

ホバーしたときにimgを非表示にするルールも。これにより、背景が「表示」されます。

于 2013-10-21T21:34:24.963 に答える
0

次の行を追加してみてください。これにより、リンクにカーソルを合わせたときに元の画像が非表示になります。

.home:hover img {
    display: none;
}

他の画像が表示されていると思いますが、デフォルトの画像は消えず、単にホバー画像の前にあります。

イメージ要素を非表示にすると要素のサイズが 0 になるため、要素aの表示スタイルを次のように変更しblockて固定サイズにすることもお勧めします。a

.home {
    display: block;
    width: 100px;
    height: 100px;
}

最後にa、ホバー画像とまったく同じように表示されるように、デフォルトの画像を要素の背景としても使用することをお勧めします。ここで、img要素を使用してデフォルトの画像を表示し、別の要素を使用してホバー画像を表示しています。これを防ぐために、1 つの要素を使用することをお勧めします。これを実現するには、次の行を追加するだけです。

.home:hover {
    background: url(../img/Home_2.png)
}

お役に立てれば！

于 2013-10-21T21:34:35.243 に答える