3

私はこれの初心者で、新しいウェブサイトに取り組んでいます。しかし、リンクを画像にフェードさせる効果が必要な時点で立ち往生しています。ページの上部にナビゲーションバーがあり、リンクの上にカーソルを合わせると、小さなロゴがフェードインすると同時にテキストがフェードアウトするようにします。リンクの外にホバーすると、リンがフェードインすると同時にフェードアウトするイメージですよね？

しかし、これを行うと、リンクがフェードアウトすると同時に、画像がポップアップしてフェードアウトします...

#navigation a[name="project"] {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#navigation a[name="project"]:hover {
opacity:0;
background-image:url(bilder/project.png)
}
4

3 に答える 3

3

画像は、フェードアウトする要素の背景であるため、ホバー時にもフェードします。画像を別の要素に分ける必要があります。

おそらく、コンテナー内で絶対配置を使用して、テキストが画像を覆い隠し、テキストがホバーされるとフェードアウトして、下の画像が表示されるようにすることができます。

これの実例はhttp://jsfiddle.net/y9aw7/にあります。

HTML:

<div id="container">
    <a href="#">Example Text</a>
    <img src="http://placekitten.com/100/100" />
</div>

CSS:

#container {
    position: relative;
}

a, img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100px;
}

a {
    z-index: 1;
    line-height: 100px;
    text-align: center;
    background-color: #fff;
    -webkit-transition: 0.4s opacity;
    -moz-transition: 0.4s opacity;
    -o-transition: 0.4s opacity;
    -ms-transition: 0.4s opacity;
    transition: 0.4s opacity;
}

a:hover {
    opacity: 0;
}

編集：OPによって提供されたフィドルからフォークされ、CSSが修正されたさらにjsfiddle：http://jsfiddle.net/JmwdC/1

于 2013-05-29T13:51:14.213 に答える
1

これを試して ：

デモ

CSS

#gl{
  position:absolute;
  left:0px;
  width:100px;
  height:30px;
  opacity:0;
  transition:all 0.5s;  
}
#gl:hover{
  opacity:1;

}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <a href='http://www.google.com/'>  <img id=gl src='https://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'>
 Google</a>
</body>
</html>
于 2013-05-29T13:56:14.653 に答える