-4

background-imageマウスカーソルが上に乗ったときに、別の<img>タグにボタン（画像または div を含む）を表示したいと思います。画像の幅は固定ですが、高さは変更できます。

この例は次のとおりです。

こちらの画像をご覧ください。

jQueryまたは純粋なJSを使用してこれを行うにはどうすればよいですか?

4

4 に答える 4

1

CSS:

div {
    position: relative;
    bottom: 30px;
    left:50%;
    z-index:1000;
    opacity:0;
}

Jクエリ: 

$("img").hover(function(){
    $("div").css("opacity",1);
},function(){
     $("div").css("opacity",0);
});

残りは自分で解決してください。

良いチュートリアル: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

于 2012-12-15T11:25:01.160 に答える
0

jqueryのみを使用してこれを行いたいと述べたので..

$('#buttonId').css("position", "absolute");
$('#buttonId').css("bottom","0");
$('#buttonId').css("cursor","hand");
$('#buttonId').css("cursor","pointer");
$('#buttonId').css("margin","0 auto");
$('#buttonId').parent().css("text-align","center");​​​​​​​​​​​​​

ところで、aここにタグは必要ありません。ハンドカーソルが必要な場合は、cursorプロパティを使用してください。

于 2012-12-15T11:42:27.680 に答える
0

jQuery hover メソッドを見てみましょう。おそらく、ボタンを画面外から目的の場所に移動することと相まって. css z-index を使用して、オブジェクトを別のオブジェクトの上に配置できます。

于 2012-12-15T11:24:24.647 に答える
0

なぜjsがここにあるのですか？

それは単純なcssです：

HTML:

<div class="image"><div class="inner"><button>Hello</button></div></div>​

CSS:

.image {
    background-image: url(http://placehold.it/350x150);
    width: 350px;
    height: 150px;
    position: relative;
}
​.image .inner {
 display:none;
 position: absolute;
 top: 60px;
 left: 100px;    
}
.image:hover .inner {
 display: block;   
}
​

デモ

トランジション付きのデモ

于 2012-12-15T11:29:16.250 に答える