5

これが私が問題を抱えているコードです-

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00;
}

#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0;
}
</style>
</head>
<body>
<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

<script type="text/javascript">

var pElements = document.getElementsByTagName("p");

$('#col1').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#f00";
}
});

$('#col2').click(function(){
for(var i = 0; i < pElements.length; i++) {
   pElements[i].style.color = "#ff0";
}
});

</script>
</body>
</html>

私が実際に欲しいのは、カラー div をホバーすると、カラー div がホバーされたときだけ p タグのテキストの色が変わることです。カラー div をクリックすると、テキストの色が永続的に変化するはずです。

問題は、色の div の 1 つをクリックして p タグ用に確定した後、他の色をホバーしても色の変更が行われないことです。クリックすると、色が恒久的に変化します。

4

2 に答える 2

12

p要素のスタイルを設定pElements[i].style.color = "#f00";すると、ホバーによって適用されるスタイルよりも具体的なスタイルが設定されます。CSS では、最も具体的なスタイルが要素に適用されます。定義した CSS ホバー クラスは適用されません。これは、JavaScript コードによって適用されるインライン スタイルを上書きするほど具体的ではないためです。

タグを使用するように CSS ホバー クラスを変更できます!important。これにより、インライン スタイルほど具体的でなくても、ホバー スタイルを適用できるようになります。

#col2:hover ~ p {
    color: #ff0 !important;
}
于 2012-12-28T15:32:02.233 に答える
2

JQuery の使用に問題がない場合は、次のものが必要だと思います: Live Example

HTML コード スニペット

<div id="col1"><span>Hover to view and click to select this color.</span></div>
<div id="col2"><span>Hover to view and click to select this color.</span></div>

<p>This is some text.</p>

CSS コード スニペット

p {
    font-family: Tahoma;
    line-height: 170%;
    color: #000;
    font-size: 15px;
    padding: 5px 0px 5px 0px;
    text-align: center;
}
#col1 {
    //some propeties
}
#col1:hover ~ p {
    color: #f00 !important;
}
#col2 {
    //some propeties
}
#col2:hover ~ p {
    color: #ff0 !important;
}​

JS コード スニペット

$("#col1").click(function () {
    $("p").css("color","#f00");
});

$("#col2").click(function () {
    $("p").css("color","#ff0");
});

それが役に立てば幸い！

于 2012-12-28T15:39:09.210 に答える