画像をホバリングするときにCSS効果を加えたいと思います。Cssのホバー表示 - divをロード
画像上にマウスを置くと、テキストのようなコンテンツを含むdivを表示したいと考えています。
だから私はこのコードで何かをしたい：私はCSSの表示に「ホバー」のdivを非表示にしようとしたとホバーに私はブロックするように表示を設定しようとしました
<div id="image"><img src="image.png"/></div>
<div id="hover">Test message</div>
が、その動作していない... :(
EDIT：。！私は、画像上のテキストをしたい、私はそれはいくつかの不透明度を取得する必要がありますが、テキストはその不透明度を受け取るべきではない画像を合わせると
行うための任意の方法がありますこれ？
#hover {
display: none;
}
#image:hover + #hover {
display: block;
}
ちょうどそれあなたのマークアップを変更するには、単純な、必要はありません保ちます。
更新その後、
あなたは、マウスのホバー上の画像の不透明度を変更したい場合は、 http://jsfiddle.net/ZSZQK/4/
#hover {
display: none;
position: relative;
top: -25px;
}
#image:hover {
opacity: .7;
}
#image:hover + #hover {
display: block;
}
アップデート2
最初の質問にいくつかの要件を追加したので、元のHTMLマークアップを変更する必要があります。
私はあなたがhtml5を使用していると仮定していますし、もしそうなら、あなたはあなたのコンテンツのコンテキストに充当タグを使用する必要があります。
<figure>
<img src="http://placekitten.com/200/100" />
<figcaption>Test message</figcaption>
</figure>
とCSS
figure {
position: relative;
display: inline-block;
}
figcaption {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,.15);
}
figure:hover img {
opacity: .7;
}
figure:hover figcaption {
display: block;
}
@Taboo Locoイメージ不透明度 –
の回答が更新されました。テキストが表示されるはずの場所にマウスを置いたときにテキストが表示されず、キナがフレーズしているように、ちょっと変わっています。 –
@ TabooLocoテキスト（画像ではない）をホバリングしたときに起こるので、テキストを後ろに移動しただけです。より良い修正をするには、TheBronxとJames Kingが合意に達したときにマークアップを変更する必要があります。 ** http：// jsfiddleを参照してください。net/ZSZQK/5/** –
試してみてください。
<div id="image">
<img src="image.png"/>
<div class="hover">Test message</div>
</div>
CSS：私は基本的に何
#image {
position:relative;
}
#image .hover {
display:none;
position:absolute;
bottom:0;
}
#image:hover .hover {
display:block;
}
だった：
#image内部。#imageが推移してdisplay:none場合はされていない場合に追加されたdisplay:blockclass="hover"id="hover"を変更しました。実際に働いていただきありがとうございます。ホバー上で画像の不透明度を約70％にして画像上にテキストを配置できる方法はありますか？ 誰かが画像の上にマウスを置いたとき、テキストが不透明画像に配置されるようにします。 –
JavaScriptを使用せずにこのようにすることができます：
1. #hoverdivを画像の上に置き、opacity:0を設定します。
2.Thanは、CSSにこれを追加します。
#hover:hover {
opacity:1
}
これはあなたの問題を解決する必要があります。
はこれを行うには非常に多くの方法がありますが、あなたが唯一のアプローチをCSSをしたい場合は、あなたのような何かにあなたのhtmlを再構築する必要があるでしょう：
<div id="image">
<img src="image.png"/>
<div id="hover">Test message</div>
</div>
そして、あなたのCSSにデフォルトでメッセージを隠します：
#hover {display:none;}
次にメッセージを示しています。ここ
#image:hover #hover {display:block;}
マークアップを再構成する必要はありません。 –
はい、画像に不透明度を追加したい場合は、テキストも不透明になります。S –
は私がGoogleで見つけた解決策であります
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mybox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.Imgdiv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#mybox .hiddenDiv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#mybox:hover .hiddenDiv {
display:block; top:0px; left:8px;
}
</style>
<body>
<div id="mybox">
<div class="Imgdiv"></div>
<div class="hiddenDiv"></div>
</div>
</body>
</html>
こんにちは、私はあなたがこのような何かをしたい、正しく理解していれば：
<div id="wrapper">
<div id="img-wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
</div>
<div id="text-wrapper">
<p>Hello world!</p>
</div>
</div>
CSS：
#img-wrapper:hover + #text-wrapper{
#wrapper{
position:relative;
border:1px solid black;
width:102px;
height:102px;
}
#text-wrapper{
position:absolute;
height:0px;
overflow:hidden;
font-size:14px;
font-family:Arial,Tahoma;
font-weight:bold;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
#img-wrapper:hover + #text-wrapper{
height:32px;
width:102px;
}
これを達成するための鍵は、このCSSのラインであります
実際には " ER IMG-ラッパーdivが「テキスト・ラッパーのdivにここ
チェックデモいくつかのものを実行します。http://jsfiddle.net/A9pNg/1/
を、私たちはあなたのJavaScriptを見ることができますか？また、http://jsfiddle.net/を設定すると... – Th0rndike
soultionはjavascriptなしにする必要がありますか？ – Tbi45
それはJsなしでなければなりません。 –