マウスがタグをホバーしているときに、タグを別のタグに変更するにはどうすればよいですか？

たとえば、私は犬のイメージを持っているとしましょう。ユーザーが画像の上にカーソルを置いたときにどうすれば画像が消え、代わりに「樹皮」というh1タグが表示されますか？マウスがタグをホバーしているときに、タグを別のタグに変更するにはどうすればよいですか？

出典

2017-05-08 Miguel

それは画像とテキストのための2つのdiv要素を持っているの内側に、あなたは、コンテナのdivを持つことができます。必要なものに基づいて表示/非表示を切り替えます。これはアイデアです。いくつか分かち合って助けてもらうことができます – tech2017

イメージをテキストの上に重ねて表示し、それを隠すイメージにホバースタイルを入れます。 – 4castle

@techLove私はそんなことは考えていませんでした。私はそれを試して、それがどのように行くか見る。 – Miguel

たぶん、このコードスニペットは、たぶん、このコードスニペットが正しい方向にあなたを指すことができソリューション

<html> 
 
<head> 
 
\t <style> 
 
\t \t #wrap { 
 
\t \t \t width: 128px; 
 
\t \t \t height: 128px; 
 
\t \t \t border: 2px solid black; 
 
\t \t \t display: inline-block; 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t #img { 
 
\t \t \t width: 128px; 
 
\t \t \t position: absolute; 
 
\t \t \t z-index: 2; 
 
\t \t \t top: 0; 
 
\t \t \t transition: all 0.3s ease-in-out 0s; 
 
\t \t } 
 
\t \t #img:hover { 
 
\t \t \t opacity: 0; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 
<div id="wrap"> 
 
\t <h1>Bark!</h1> 
 
\t <img id="img" src="https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/256x256/plain/dog.png"> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-05-08 17:33:30

ことができます。

<html> 
<head> 
<style> 
img, h1 { 
     transition: all 0.3s ease-in-out 0s; 
} 
h1 { 
    display: none; 
} 
img:hover + h1 { 
    display: block; 
} 
h1:hover + img { 
    display: none; 
} 
img:hover { 
    display: none; 
} 
</style> 
</head> 
<body> 
<div> 
<img src="http://i.imgur.com/jsdLHHv.png" /> 
<h1>Bark</h1> 
</div> 
</body>

出典

2017-05-08 17:39:33 GlennFriesen

はここで非常に簡単な例です。

dog-barking-tag { 
 
    display: none; 
 
} 
 
parent:hover dog-barking-tag { 
 
    display: inline; /* or any other display value you need */ 
 
} 
 
parent:hover dog-image-tag { 
 
    display:none; 
 
}

<parent> 
 
    <dog-barking-tag> 
 
    &lt;::barking tag:: /> 
 
    </dog-barking-tag> 
 
    <dog-image-tag> 
 
    &lt;dog image tag /> 
 
    </dog-image-tag> 
 
</parent>

"交換" parent:hover上で行われる：自己説明をする必要があります。

出典

2017-05-08 17:44:54

これはさまざまな方法で実現できます。下の私の例では、コンテナ上のホバー上で "可視性"プロパティを変更します。以下のサンプルコードを参照してください。

.animal-cont{ 
 
\t \t \t width: 16%; 
 
     height: 120px; 
 
     border: 3px #ddd solid; 
 
     position: relative; 
 
     cursor: pointer; 
 
\t \t } 
 
    h1 { 
 
     left: 50% ; 
 
     top: 50%; 
 
     transform: translate(-50%,-50%); 
 
     margin: auto; 
 
\t \t \t position: absolute; 
 
     visibility: hidden; 
 
     color: #843f15; 
 
\t \t } 
 
    img { 
 
    max-width: 100%; 
 
    } 
 
    .animal-cont:hover > img { 
 
\t \t \t visibility: hidden; 
 
\t \t } 
 
    .animal-cont:hover > h1 { 
 
\t \t \t visibility: visible; 
 
\t \t }

<div class="animal-cont"> 
 
\t <h1>Bark!</h1> 
 
\t <img id="img" src=""> 
 
</div>

出典

2017-05-08 18:15:39 blecaf

ありがとうございます。これはうまくいった。 – Miguel

マウスがタグをホバーしているときに、タグを別のタグに変更するにはどうすればよいですか？

答えて

関連する問題