私はマウスの上を移動すると、画像の左下側に小さなボックスを表示しようとしています。箱の中には、別のページへのリンクがあります。イメージ上のテキストmouseover？
Hereは、私が望むものと多少似ていますが、画像の境界に接続されていない方が小さくなります。
すべてを試しましたが、回答が見つかりません。私はjavascriptの知識がまったくないという事実だけではなく、ツールチップを使用したくありません。私は本当にこれがCSSであることを望んでいます。また
私はここでright here.
。
HTML：
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS：
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
デモHERE。
HTML：：
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS：
#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
jqu
これは、代わりにjQueryを使用して同じ結果を達成するための方法でありますERYコード：
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
あなたが欲しいjqueryのコードを置くことができ、HTMLページの体で、その後、あなたはヘッド、このようなでjQueryライブラリを含める必要があります。
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
デモHEREが表示されます。
あなたは、あなたのウェブサイト上でそれを使用するだけで<img src />値を変更して、複数の画像とキャプションを追加することができますしたい、ちょうど私が使用するフォーマットをコピー：class="text"
ありがとうFabio、これも同様に動作しますが、他は簡単です。私はこれを見て、私がjavascriptでもっとやってみようとします:) –
あなたは歓迎です。javascriptはあなたが名前から推測できるようにJavaに似ていますが、よりシンプルです。あなたがそれを学びたいなら、あなたはcodecademy.comで見つけることができるコースをお勧めします。それは退屈なものではなく、学習中にコードを作成する必要があります。 JQueryに加えて、JavaScript JavaScriptを使用するよりも簡単な方法で強力なものをコード化できるJavaScriptフレームワークがあります。公式の文書はうまくいきます:) @alexr – Fabio
見つけることができると連携しようとしている画像は、この使用してCSSを行うための一つの方法です
HTML
<div class="imageWrapper">
<img src="http://lorempixel.com/300/300/" alt="" />
<a href="http://google.com" class="cornerLink">Link</a>
</div>
CSS
.imageWrapper {
position: relative;
width: 300px;
height: 300px;
}
.imageWrapper img {
display: block;
}
.imageWrapper .cornerLink {
opacity: 0;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 2px 0px;
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.imageWrapper:hover .cornerLink {
opacity: 0.8;
}
それとも左下隅にそれをしたい場合：これは、CSS3で:hover pseudoelementを使用している
使用:hover::before pseudooclassでclass="hover"で画像やPを挿入
.round-pic2:hover::before{
content: 'text';
position: relative;
top: 60px;
left: 50px;
width: 30px;
height: 20px;
text-align: center;
display: inline-block;
}
移植性についてはわかりませんが、これは間違いなくそれに似ています。誰かがcenter :: ::/::テキストの後に確実に中心を置く方法を思いつくことができるかどうか疑問に思う！ – Lodewijk
私は、この作品私の答え – Fabio