將鼠標懸停在圖像映射上時是否改變文本顏色？

-1

即時通訊與我的代碼有點問題，即時嘗試在這裏做的只是將文本顏色（標題 - &子行文本）從黑色更改爲白色。我有10個熱點的默認圖像。每個熱點包含一個文本，並且在盤旋一個新的背景顏色（具有相應的跳躍點的新圖像映射）後，文本顏色將被改變。懸停熱點和標題不會造成任何問題，但懸停子標題文本會將顏色更改爲白色，但會突出顯示下一個熱點。我不知道是什麼問題將鼠標懸停在圖像映射上時是否改變文本顏色？

這裏是我的html代碼

<!-- MAP BEGIN --> 
<div id="shoppingMap"> 

    <!-- HIDDEN MAPS BEGIN --> 
    <img class="shoppingMap-image one" src="area_one.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image two" src="area_two.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image three" src="area_three.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image four" src="area_four.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image five" src="area_five.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image six" src="area_six.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image seven" src="area_seven.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image eight" src="area_eight.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image nine" src="area_nine.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image ten" src="area_ten.jpg" usemap="#ShoppingMap" /> 
    <!-- HIDDEN MAPS END --> 

    <!-- IMAGE-MAPPING BEGIN --> 
    <map name="ShoppingMap" id="ShoppingMap"> 
     <area shape="poly" coords="566,206,666,102,660,92,729,17,825,110,781,155,795,170,730,233,747,255,716,285,684,253,644,283,566,206" href="#" alt="areaOne" class="mapArea" /> 
     <area shape="poly" coords="745,300,746,301,788,254,780,247,831,193,842,202,886,158,930,202,923,209,950,234,820,364,791,334,785,342,745,300" href="#" alt="areaTwo" class="mapArea" /> 
     <area shape="poly" coords="623,325,624,326,622,428,687,447,737,447,788,389,683,283,623,324" href="#" alt="areaThree" class="mapArea" /> 
     <area shape="poly" coords="555,264,556,265,441,385,442,413,442,409,425,427,425,530,441,548,601,548,601,327,556,265" href="#" alt="areaFour" class="mapArea" /> 
     <area shape="poly" coords="686,461,687,462,686,697,962,697,962,460,687,460" href="#" alt="areaFive" class="mapArea" /> 
     <area shape="poly" coords="425,592,426,593,425,696,600,697,601,574,440,574,425,592" href="#" alt="areaSix" class="mapArea" /> 
     <area shape="poly" coords="215,574,216,575,216,639,231,639,231,655,220,655,220,698,251,698,251,711,392,709,391,698,400,698,400,591,383,574,216,574" href="#" alt="areaSeven" class="mapArea" /> 
     <area shape="poly" coords="54,422,55,423,54,639,205,638,204,421,55,422" href="#" alt="areaEight" class="mapArea" /> 
     <area shape="poly" coords="216,480,217,481,217,550,384,549,400,531,400,429,382,411,382,383,330,331,286,378,286,479,217,479" href="#" alt="areaNine" class="mapArea" /> 
     <area shape="poly" coords="410,144,411,145,296,260,400,363,426,363,564,224,551,209,551,193,541,182,494,231,410,145" href="#" alt="areaTen" class="mapArea" /> 
    </map> 
    <!-- IMAGE-MAPPING END --> 

    <!-- DEFAULT MAIN TEASER BEGIN --> 
    <img src="floors&amp;corners_1010x764.jpg" width="1010px" height="764px" usemap="#ShoppingMap"/> 
    <!-- DEFAULT MAIN TEASER END --> 

    <!-- HEADLIN- & SUBLINE TEXT BEGIN --> 
    <div class="areaOne"> 
     <span class="headlineText">Party wear</span> 
     <span class="sublineText">Make your next night out extra special</span> 
    </div> 
    <!-- HEADLIN- & SUBLINE TEXT END --> 

</div> 
<!-- MAP END -->

這裏是jQuery代碼

$(document).ready(function(){ 
$('.mapArea, .headlineText, .sublineText').hover(function(){ 
    var current_area = $(this).index(); 
    $(this).parents('#shoppingMap').find('img.shoppingMap-image').eq(current_area).addClass('active'); 
    $('.headlineText, .sublineText').css({'color': '#fff'}); 
    $('#shoppingMap img').not('.shoppingMap-image').css({'display':'none'}); 
    }, function(){ 
    var current_area = $(this).index(); 
    $(this).parents('#shoppingMap').find('img.shoppingMap-image').eq(current_area).removeClass('active'); 
    $('.headlineText, .sublineText').css({'color': '#333'}); 
    $('#shoppingMap img').not('.shoppingMap-image').css({'display':'block'}); 
    } 
);

這裏是CSS-代碼

/* HEADLINE TEXT */ 
    .mainHeadlineText{ 
font-family: arial,helvetica,sans-serif; 
font-size: 18px; 
font-weight: 400; 
color: #333; 
letter-spacing: 0.1em; 
text-transform: uppercase; 
background-color: #fff; 
border-bottom: 2px solid #333; 
margin-bottom: 0; 
    } 

/* MAP IMAGE */ 

#shoppingMap { 
position: relative; 
clear: none; 
width: 1010px; 
height: 764px; 
} 

#shoppingMap img { 
display: block; 
position: absolute; 
top: 0; 
bottom: 0; 
z-index: 0; 
} 

#shoppingMap img.shoppingMap-image { 
display: none; 
} 

#shoppingMap img.shoppingMap-image.active { 
display: block; 
} 

.areaOne .headlineText { 
    display: block; 
    position: absolute; 
    top: 18%; 
    right: 25%; 
    z-index: 1; 
    } 

#shoppingMap .headlineText { 
    font-family: arial,helvetica,sans-serif; 
font-size: 15px; 
font-weight: 700; 
color: #333; 
letter-spacing: 0.1em; 
text-transform: uppercase; 
cursor: pointer; 
} 

.areaOne .sublineText { 
display: block; 
position: absolute; 
top: 21%; 
right: 25%; 
width: 126px; 
text-align: center; 
z-index: 1; 
} 

#shoppingMap .sublineText { 
font-family: arial,helvetica,sans-serif; 
font-size: 13px; 
font-weight: 400; 
color: #333; 
cursor: pointer; 
}

來源

2015-04-17 User1979

請粘貼您的CSS代碼。 – Turtle

對不起，我忘了這麼做 – User1979

可以編輯sheetstyle。

.shoppingMap-image one:hover{background-color:#fff,color:#333}.

來源

2015-04-17 09:18:06

仍然存在懸停sublineText不會改變相應熱點的背景顏色的問題，而是它改變了下一個熱點的背景 – User1979

對不起，我忘記提及，但新的熱點背景是圖像，所以沒有必要使用CSS更改BackColor – User1979

我同意@stanze。 –

添加這個樣式在樣式表和嘗試。

#shoppingMap .headlineText:hover, #shoppingMap .sublineText:hover{ 
    color :red; 
}

來源

2015-04-17 09:19:05 stanze

抱歉，它沒有幫助 – User1979

將鼠標懸停在圖像映射上時是否改變文本顏色？

回答

相關問題