3

我是这方面的初学者，我正在开发我的新网站。但我被困在一个地方，我想要让我的链接淡入图像的效果。我的页面顶部有一个导航栏，当我将鼠标悬停在链接上时，我希望文本在一个小徽标淡入的同时淡出。当我将鼠标悬停在链接之外时，我想要图像在 lin 淡入的同时淡出，你知道吗？

但是当我这样做时，图像只是弹出并在链接淡出的同时淡出......

#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;
}

编辑：进一步的 jsfiddle，由 OP 提供的小提琴分叉，带有更正的 CSS：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 回答
1

您可以使用任何您想要实现此目的的属性，除非display它不适用于CSS3 transition。

最常见的技术利用

  • 不透明度（至 0）
  • 高度（到 0）
  • z-index（负值/低于容器的值）

坚持您的示例，您可以使用background-imagein<li>并将不透明度<a>更改为 ，无需更改 HTML。

演示：http: //jsfiddle.net/D6wuH/2/

相关CSS

li {
    /* ... other stuff... */
    background:none no-repeat scroll center center ;
}

#navigation li,  #navigation li > a{
    transition: all 1s ease-in-out;    
}
 #navigation li > a{
    background: white;
 }

#navigation li:hover {
    background:url(http://dareminnesota.com/images/facebook-like-button.png) 
                   no-repeat scroll center center transparent;    
}
#navigation li:hover > a {    
    opacity: 0;
}

玩弄许多属性的初始状态和悬停状态之间的差异（是 X，悬停时变为 Y；不存在，悬停时它在那里；在那里，悬停时它不再存在）将让您实现一个不同结果的世界，具有如下奇怪的效果：http: //jsfiddle.net/D6wuH/0/ :)

于 2013-05-29T16:00:56.263 回答