將兩個鏈接轉換爲一個在HTML中

-2

我有一個關於我的HTML和CSS的小問題。我的HTML標記是這樣的將兩個鏈接轉換爲一個在HTML中

<div class="link-wrap"> 
    <h4><a href=""><span class="link-text">Link 1</span><span class="link-image">Link 2</span></a></h4> 
</div>

和我的CSS是這樣的

<style> 
.link-wrap { 
    padding: 0; 
    margin: 0; 
} 
h4 { 
    display: block; 
} 
a { 
    text-decoration: none; 
} 
span.link-text { 
    padding: 0; 
    margin: 0; 
    color: #666; 
    text-decoration: none; 
} 
span.link-text:hover { 
    color: #ccc; 
} 
span.link-image { 
    color: #F00; 
} 
span.link-image:hover { 
    color: #666; 
} 
div.link-wrap span.link-text span.link-image:hover { 
    text-decoration: underline; 
} 
</style>

現在按照我的標記，你可以看到兩個<span>已轉換成兩個不同的環節，他們有不同的懸停狀態。現在我需要將這兩個鏈接轉換爲一個。就像我將鼠標懸停第一個跨度的示例一樣，它也應該改變第二個跨度懸停狀態。

更新對不起，你說我不能改變我的標記。我的標記將保持不變。

來源

2012-10-12 amit patel

你在問什麼不清楚。如果它們用一個錨標籤包裝，「」，那麼它只是一個鏈接。如果你不能改變HTML，那麼你期望做什麼？ – Sparky

我想我不清楚這個問題。如果你想要兩個鏈接，那麼你需要兩個錨標籤。如果你不會改變你的標記，那麼這是不可能完成的。 – War10ck

通過研究你的html標記和CSS我想告訴你，懸停的CSS不適用於span元素，它適用於。如果你想使用一個懸停狀態兩者的跨度僅僅使用

div.link-wrap a:hover span.class-name { }

希望它會爲你工作。

來源

2012-10-13 03:49:06 NewUser

懸停適用於a元素，而不適用於跨度。爲了使這兩個範圍的同一個變化，當你將鼠標懸停在一，使用

a:hover span.class {}

至於反對你的結構。

來源

2012-10-12 16:16:17 Robbie

有關工作示例，請參閱http://jsfiddle.net/cDtdU/ – MassivePenguin

將兩個鏈接轉換爲一個在HTML中

回答

相關問題