Question

我是这方面的初学者，我正在开发我的新网站。但我陷入了一个我想要的效果，这将使我的链接淡入图像。我在页面顶部有一个导航栏，当我将鼠标悬停在链接上时，我希望文本在小徽标淡入的同时淡出。当我将鼠标悬停在链接上时，我希望你想知道，当你的脸渐渐消失的同时，你的影像会逐渐消失吗？

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

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

Answer 1

图像是您淡出的元素的背景，因此它也会在悬停时淡出。您需要将图像分成单独的元素。

也许你可以在容器内使用绝对定位让文字覆盖图像，然后当文本悬停在上面时，它会淡出，露出下面的图像。

这方面的一个工作示例是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

Answer 2

试试这个：

Demo

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>

Answer 3

您可以使用您想要实现此目的的任何属性，但display除外， CSS3过渡无效。

最常用的技术是使用

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

坚持您的示例，您可以使用background-image中的<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/：）

我想让我的链接变得容易进入图像

3 个答案: