Css 我想把我的链接简化成图片_Css

Css 我想把我的链接简化成图片

css

Css 我想把我的链接简化成图片,css,Css,我是这方面的初学者，我正在开发我的新网站。但我被困在一个点上，我想要的效果，将使我的链接淡入图像。我在页面顶部有一个导航栏，当我将鼠标悬停在链接上方时，我希望文本在小徽标淡入的同时淡出。当我将鼠标悬停在链接外时，我希望图像在lin淡入的同时淡出，你知道吗但是当我这样做的时候，图像就会弹出并在链接消失的同时消失 #navigation a[name="project"] { -webkit-transition: opacity 1s ease-in-out; -moz-transition:

我是这方面的初学者，我正在开发我的新网站。但我被困在一个点上，我想要的效果，将使我的链接淡入图像。我在页面顶部有一个导航栏，当我将鼠标悬停在链接上方时，我希望文本在小徽标淡入的同时淡出。当我将鼠标悬停在链接外时，我希望图像在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)
}

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

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

这方面的一个有效例子是

HTML:

编辑：进一步的JSFIDLE，从OP提供的小提琴中派生出来，带有更正的CSS:

尝试以下操作：

CSS

HTML


JS-Bin

您可以使用任何想要实现这一点的属性，除了

显示

，它不适用于CSS3转换

最常用的技术是利用

不透明度（至0）
高度（至0）
z索引（负/低于容器的值）

按照您的示例，您可以通过在

中使用

背景图像并将不透明度更改为
相关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;
}

利用许多属性的初始状态和悬停状态之间的差异（was X，hover变为Y；was note，on hover it's；was note，on hover it's；was note，on hover it's note more）将使您获得一个不同结果的世界，具有以下奇怪的效果：）您可以添加小提琴吗（）为了说明你到目前为止做了什么？请你在问题中包含你的HTML，并包含一个指向JSFIDDLE的链接。它很快，支持实时预览。你看到我想去哪里了吗？@Snik1将其复制到JSbin:P这是代码，但当然我必须在某个地方包含图像链接，但是你看到我想做什么了吗？我看到你想做什么了。下面是我建议的一个工作示例：看看这个，我使用了你的方法，它会像我想要的那样淡出，但它现在和现在都显示内容：两个内容同时淡出。嘿，等一下，这真的很接近了，但还是有一点我不明白，现在看看！你知道我的导航栏。它由六个环节组成。对于每个链接，当我在链接上方悬停时，我希望有一个不同的徽标淡入。但我不想让它突然出现在那里。我希望它淡出链接文本，同时淡出图像（徽标）。当我将鼠标悬停在远离链接的位置时，我希望效果反转。很抱歉，我让你生气了，但正如我说的，我是个初学者。这太棒了！非常感谢你！你能告诉我这里出了什么问题吗？我想把所有的东西排成一行，每个都有一个logo，但是当我把鼠标悬停在上面的时候，所有的东西都会飘到左边，只有facebook和twitter会显示出来。。。删除你所有的绝对位置：）+1表示对于同一个HTML和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;
}

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

}

<!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>

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