画像上にマウスを置くとテキストが表示されます

Question

画像にカーソルを移動すると、別の画像に変更してテキストを表示します。私はホバー上の別のイメージに変更に成功しましたが、テキストの表示方法はわかりません。私はまた、テキスト（色、サイズ、位置）をカスタマイズしたいと思います。私のコード：

<section id="works"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="desktop-12 columns"><div class="border-top"></div></div> 
 

 
\t \t \t 
 
\t \t \t \t <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>Bird</h3> 
 
\t \t \t \t \t \t \t <span class="category">Illustration</span> 
 

 
\t \t \t \t \t \t \t <img src="images/thumb_item01.png" onmouseover="this.src='images/thumb_item01a.png';" onmouseout="this.src='images/thumb_item01.png';"/> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
        <div class="clear"></div> 
 
\t \t \t \t </a> 
 
\t \t \t \t </div></section>

ありがとうございました。

Answer 1

使用CSS :hoverここで兄弟セレクタ+

でそしてこの.showtext:hover + divのように、あなたのCSSルールのクラスを使用して使用されるテキストを表示するために、あなただけの反対で、すべてのテキストのいずれかが必要ですコメントに基づいて、各テキストの更新

に対して一意である必要がidは、

私は彼らの周りのラッパーを追加した画像の上にテキストを持っているし、単一のクエリでテキストに

.imgwrapper { 
 
    position: relative; 
 
} 
 
.showtext + div { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    display: none; 
 
    pointer-events: none; 
 
    font-size: 24px; 
 
    width: 250px; 
 
} 
 
.showtext:hover + div { 
 
    display: block; 
 
}

<section id="works"> 
 
    <div class="container"> 
 
    <div class="desktop-12 columns"> 
 
     <div class="border-top"></div> 
 
    </div> 
 

 
    <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
     <div class="desktop-3 mobile-half columns"> 
 
     <div class="item first-row"> 
 
      <h3>Bird</h3> 
 
      <span class="category">Illustration</span> 
 

 
      <div class="imgwrapper"> 
 
      <img class="showtext" src="http://placehold.it/250" onmouseover="this.src='http://placehold.it/250/0ff';" onmouseout="this.src='http://placehold.it/250';" /> 
 

 
      <div>Some text to be shown on top of the image</div> 
 
      </div> 
 

 
     </div> 
 
     <!-- // .item --> 
 
     </div> 
 
     <!-- // .desktop-3 --> 
 
     <div class="clear"></div> 
 
    </a> 
 
    </div> 
 
</section>

Answer 2

使用mousenterとmouseleave位置を与えました。

特定のセレクタークラス.firstImageを画像に適用することをお勧めします。

$('.firstImage').on({ 
 
    mouseenter: function (evt) { 
 
    $(this).attr('src', 'http://placehold.it/350x350') 
 
    $(this).parent('div').css('color', 'red'); 
 
    }, 
 
    mouseleave: function (evt) { 
 
    $(this).attr('src', 'http://placehold.it/350x150') 
 
    $(this).parent('div').css('color', 'blue'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="works"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="desktop-12 columns"><div class="border-top"></div></div> 
 

 
\t \t \t 
 
\t \t \t \t <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>Bird</h3> 
 
\t \t \t \t \t \t \t <span class="category">Illustration</span> 
 

 
\t \t \t \t \t \t \t <img src="http://placehold.it/350x150" class="firstImage"/> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
        <div class="clear"></div> 
 
\t \t \t \t </a> 
 
\t \t \t \t </div></section>

Answer 3

あなたが必要とするすべては、ちょうどそのテキスト "DIV" にIDを与え、あなたのCSSに更新されます。

img + div { 
 
    display: none; 
 
} 
 
img:hover + #ImageText { 
 
    display: block; 
 
}

<section id="works"> 
 
    <div class="container"> 
 
    <div class="desktop-12 columns"> 
 
     <div class="border-top"></div> 
 
    </div> 
 

 

 
    <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
     <div class="desktop-3 mobile-half columns"> 
 
     <div class="item first-row"> 
 
      <h3>Bird</h3> 
 
      <span class="category">Illustration</span> 
 

 
      <img src="http://placehold.it/50" onmouseover="this.src='http://placehold.it/50/f00';" onmouseout="this.src='http://placehold.it/50';" /> 
 

 
      <div id="ImageText">Some text to be shown</div> 
 
     </div> 
 
     <!-- // .item --> 
 
     </div> 
 
     <!-- // .desktop-3 --> 
 
     <div class="clear"></div> 
 
    </a> 
 
    </div> 
 
</section>

Answer 4

はこれを試してみてください。

$(document).ready(function() { 
 
    
 
    $(".myimg").mouseenter(function(){ 
 
     $(this).attr({src:"http://kurld.com/images/wallpapers/flower-image/flower-image-18.jpg"}); 
 
     $(".txt").show(); 
 
     
 
    }).mouseleave(function(){ 
 
     $(this).attr({src:"https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg"}); 
 
     $(".txt").hide(); 
 
     
 
    }) 
 
})

img { 
 
    width: 200px; 
 
    height: 100px; 
 
    } 
 
.txt { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    background-color: #fff; 
 
    } 
 
.wrapper { 
 
    position: relative; 
 
    }

<section id="works"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="desktop-12 columns"><div class="border-top"></div></div> 
 
\t \t \t \t <a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item first-row"> 
 
\t \t \t \t \t \t \t <h3>Bird</h3> 
 
\t \t \t \t \t \t \t <span class="category">Illustration</span> 
 
          <div class="wrapper"> 
 
\t \t \t \t \t \t \t <img class="myimg" src="https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg" /> 
 
          <div class="txt">Red Flower</div> 
 
          </div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
        <div class="clear"></div> 
 
\t \t \t \t </a> 
 
\t \t \t \t </div></section> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>