我想讓我的鏈接變得輕鬆圖像

我是一個初學者，我正在我的新網站上工作。但是我被困在了一個我想要的效果，這會使我的鏈接淡入圖像。我的頁面上方有一個導航欄，當我將鼠標懸停在鏈接上時，我希望文本在淡出的同時淡出。當我將鼠標懸停在鏈接之外時，我希望當林正在消失的同時，圖像會淡出，你知道嗎？我想讓我的鏈接變得輕鬆圖像

但是當我這樣做，圖像只是彈出，並在同一時間爲紐帶淡出的淡出...

#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：> –

我想讓我的鏈接變得輕鬆圖像

回答

相關問題