我想让我的链接变得轻松图像

我是一个初学者，我正在我的新网站上工作。但是我被困在了一个我想要的效果，这会使我的链接淡入图像。我的页面上方有一个导航栏，当我将鼠标悬停在链接上时，我希望文本在淡出的同时淡出。当我将鼠标悬停在链接之外时，我希望当林正在消失的同时，图像会淡出，你知道吗？我想让我的链接变得轻松图像

但是当我这样做，图像只是弹出，并在同一时间为纽带淡出的淡出...

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

来源

2013-05-29 Angelica

你可以添加一个小提琴（http：// jsfiddle。净）来说明你到目前为止做了什么？ – surfitscrollit

您能否在问题中包含您的HTML并包含jsFiddle的链接 – 2013-05-29 13:50:00

的形象是你的衰落元素的背景出来，所以它也会褪色悬停。您需要将图像分隔成单独的元素。

也许你可以在容器中使用绝对定位来让文字遮住图像，然后当文字被徘徊时，它会淡出，露出下面的图像。

的这个

工作示例是在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-29 13:51:14 surfitscrollit

http://jsfiddle.net/HdDBk/2/ 以下是代码，但我当然必须在某处包含图像链接，但你看到我想要做什么？ – Angelica

我明白你想要做什么。这是我的建议的一个工作示例：http://jsfiddle.net/y9aw7/ – surfitscrollit

http://jsfiddle.net/y9aw7/3/ 检查了这一点，我用你的方法，它会像我想要的那样消失，但它现在和现在都显示了两种内容：两者同时淡出。 – Angelica

试试这个：

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>

来源

2013-05-29 13:56:14 Arpit

这对我不起作用，但我可以在fiddler – Angelica

ya处显示我的代码。展示你的小提琴。但使用jsbin.com – Arpit

http://jsfiddle.net/HdDBk/2/ – Angelica

你可以使用你想要实现这个任何财产，除非display不与CSS3过渡工作。

的最常见的技术利用

不透明度（0）
高度（为0）
z索引的（到比容器负/降值）

坚持你的榜样，你可以通过在<li>中使用background-image并将不透明度更改为<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-29 16:00:56

太棒了！非常感谢！你能告诉这里有什么问题吗？我想排列所有东西，并为每个标识，但它只浮动到左侧，只有Facebook显示和twitter时，我将鼠标悬停在... http://jsfiddle.net/stAqD/2/ – Angelica

删除全部你的绝对位置:) –

PS：超过15的代表，你现在可以upvote：> –

我想让我的链接变得轻松图像

回答

相关问题