如果只有一個懸停在兩個不同的<span>激活？

通常，兩個.labout跨度都是白色的，兩個都是.pabout跨度是黃色的。當我徘徊時，整個短語會變成黑色。即當按鈕的任何部分懸停時，學習關於全服務是黑色的，而不是單個跨度。如果只有一個懸停在兩個不同的<span>激活？

<div id="inner"> 
    <a style="color:white" href="full-service/overview/" class="fs-button"> 
     <span class="labout">LEARN ABOUT</span> 
     <span class="pabout"> FULL SERVICE</span> 
    </a>      
    <a style="color:white; vertical-align:middle;" href="diy/overview/" class="diy-button"> 
     <span class="labout">LEARN ABOUT</span> 
     <span class="pabout"> DO IT YOURSELF</span> 
    </a> 
</div>

然而，隨着CSS我有，只有你將鼠標懸停在單個跨度變黑，短語的其餘部分則不會。這是我的CSS：

a.fs-button { 
    display: inline; 
    background: #28353e; 
    height: 26px; 
    margin: 0 10px; 
    width: 245px; 
    float: left; 
    font-family: 'asenine'; 
    text-decoration: none; 
    font-size: 20px; 
    text-align: center; 
    vertical-align: middle; 
    padding-top: 5px; 
    position: absolute; 
} 

a span.pabout { 
    color: #f6ec02; 
} 

.home-buttons a span.labout:hover { 
    color: black; 
} 

.home-buttons a span.pabout:hover { 
    color: black; 
} 

.home-buttons a.fs-button:hover { 
    cursor: pointer; 
    color: black; 
    font-weight: 500; 
    background: #f7ed04; /* Old browsers */ 
    background: -moz-linear-gradient(left, #f7ed04 0%, #eda704 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f7ed04), color-stop(100%,#eda704)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #f7ed04 0%,#eda704 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #f7ed04 0%,#eda704 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #f7ed04 0%,#eda704 100%); /* IE10+ */ 
    background: linear-gradient(to right, #f7ed04 0%,#eda704 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7ed04', endColorstr='#eda704',GradientType=1); /* IE6-9 */ 
}

來源

2013-07-09 Joel Levy

你只是懸停在錯誤的選擇器上。您想要根據a是否徘徊着色，而不是個別跨度是否徘徊着色。

a:hover .pabout, a:hover .labout { color: black; }

旁註：你必須在style屬性樣式，然後將其覆蓋在選擇.home-buttons a.fs-button:hover。您的選擇器不會覆蓋style屬性。儘量不要混用CSS類和內聯樣式。

來源

2013-07-09 20:02:33

你想父a的:hover，而不是跨越自身：

.home-buttons a.fs-button:hover span.labout, 
.home-buttons a.fs-button:hover span.pabout { 
    color: black; 
}

來源

2013-07-09 20:05:22 jmoerdyk

嘗試使用

.fs-button:hover .labout, 
.fs-button:hover .pabout{ color:#000 }

來源

2013-07-09 20:06:07

如果只有一個懸停在兩個不同的<span>激活？

回答

相關問題