在一組中的單個鏈接不要打擾懸停其他鏈接

Question

我想創建一個論壇類別鏈接指南。喜歡的東西this ...

，它說的地方：論壇>金融路線圖

首先 - 每當我懸停在鏈接，它推動該鏈接一行下來。

第二個 - 我怎樣才能得到塊在這個論壇裏，它有外部右塊？

我創建了一個fiddle顯示它在做什麼和我有什麼...

我想過把我的懸停塊設置會有所幫助，但什麼也沒做。

我該怎麼做？

.forum_links_out { 
    margin-top: 20px; 
    margin-right: 10px; 
    margin-left: 10px; 
    background-color: #E0E0E0; 
    border: 1px solid black; 
    border-radius: 8px; 
    padding: 10px; 
} 
.forum_links_out a:link { 
    color: #000000; 
    text-decoration: none; 
} 
.forum_links_out a:hover{ 
    display: block; 
    background-color: #A0A0A0; 
} 
.forum_links_out a:visited { 
    color: #000000; 
} 

Answer 1

在這裏，我們去 - DEMO第一：

.forum_links_out { 
 
    margin: 20px; 
 
\t background-color: #E0E0E0; 
 
\t border: 1px solid black; 
 
\t border-radius: 8px; 
 
    display: flex; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 
.forum_links_out a { 
 
\t color: #000000; 
 
\t text-decoration: none; 
 
    padding: 10px 30px; 
 
    position: relative; 
 
} 
 
.forum_links_out a:first-child { 
 
    padding-left: 20px; 
 
} 
 
.forum_links_out a span { 
 
    width: 30px; 
 
    height: 30px; 
 
    position: absolute; 
 
    right: -12px; 
 
    top: 4px; 
 
    transform: rotate(45deg); 
 
    z-index: 2; 
 
    border-right: 1px solid black; 
 
    border-top: 1px solid black; 
 
\t background-color: #E0E0E0; 
 
} 
 
.forum_links_out a:last-child { 
 
    flex-grow: 1; 
 
} 
 
.forum_links_out a:hover, .forum_links_out a:hover span { 
 
\t background-color: #A0A0A0; 
 
} 
 
.forum_links_out a:visited { 
 
\t color: #000000; 
 
}

<div class="forum_links_out"> 
 
    <a href='discussions.php'>Discussions Index<span></span></a> 
 
    <a href='discussions2.php'>Computers<span></span></a> 
 
    <a>Asus</a> 
 
</div>

工作原理：