0

これは多くの人にとって非常に簡単かもしれませんが、私は開発者ではないのでできません。別の画像の上に画像を重ねようとしています。動作しますが、ホバーすると背景に別の画像が表示されます。2 つの画像 (同じサイズ) をホバーすると、互いに重なり合い、異なる色が表示されます。

CSSコードは次のとおりです。

.votebutton {
    text-align:center;
    background: transparent;
    width: 24px;
    height: 25px;
    overflow: hidden;
    float: right;
    margin: -21px -28px 0px 0px;
}
.votebutton a: {
}
.votebutton a:hover {
    background-image: url(../img/thumbs.png);
    position:relative;
    display: inline;
    z-index: 2;
    top: 2;
    height: 5px;
    width: 10px;
}

HTML

<div id="vote" class="votebutton">{if $anonymous_vote eq "false" and $user_logged_in eq ""} 

   <a data-toggle="modal" href="#LoginModal" class="btn btn-mini {if $link_shakebox_currentuser_votes eq 1}btn-success{/if}">

{else} {if $link_shakebox_currentuser_votes eq 0}

ここ -- @Pinocchio --> 「stackoverflow コミュニティ」の誰かが私を助けてくれると本当にありがたいです。ありがとう。

編集: 完全なコードを更新しました。ありがとう。

4

1 に答える 1

0

あなたが何を達成しようとしているのか正確にはわかりません。それが単にリンクのホバー効果である場合、:hover を使用すると、試みているとおりに機能するはずです。

これは、基本的な背景のホバー変更を行うフィドルです - http://jsfiddle.net/f6Frt/1

リンクの背景画像を設定し、ホバー時に変更するだけです。

.votebutton a {
    padding: 20px;
    background-image: url('http://twimgs.com/informationweek/galleries/automated/818/Slide-1-opening-image-38launch_full.jpg');
    background-size: 100%;
}

.votebutton a:hover {
    color:rgba(0,0,0,0);
    background-image: url('http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2004/01/reull_vallis_-_hrsc_image_15_january_20042/9758050-3-eng-GB/Reull_Vallis_-_HRSC_image_15_January_2004_node_full_image.jpg');
    background-size: 100%;
}

ホバー時に背景画像のみを表示する場合は、ここに示すように CSS から背景を省略しますhttp://jsfiddle.net/f6Frt/2

リンク テキストを非表示にしたい場合は、その色を透明に設定できます。

.votebutton a:hover{color:rgba(0,0,0,0);}

ここに示されています - http://jsfiddle.net/f6Frt/3/

さらに一歩進めたい場合は、jQuery を使用してホバー時に html コンテンツをクリアすることができます ( http://jsfiddle.net/f6Frt/4/ を参照)。 jQuery を初めて使用する場合。

お役に立てれば。

于 2013-08-26T03:01:16.903 に答える