2

とても簡単なはずですが、うまくいきません。タイトルにある通り onmouseover の背景色を span.name (オレンジ) から変更したい 

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.style.backgroundColor = 'yellow'"; onmouseout="this.style.backgroundColor = 'green'"; >
    <span class="pdf-style">
        <span class="name" style="display:inline-block;background-color:orange;"> T E S T </span>
    </span>
</div>

私はこれを見つけましたが、 クラス名を使用して要素を取得することができませんでした

これは私がしようとしていることです:フィドルはここにあります

FFでのみ動作する必要があります

手伝ってくれてありがとう！

4

6 に答える 6

1

これを試すこともできます

window.onload = function(){
    var span = document.querySelector('.name');
    // if you want to change the color to change onload
    span.style.backgroundColor = 'green';
    span.onmouseover = function(){
        this.style.backgroundColor = 'yellow';
    };
    span.onmouseout = function(){
        this.style.backgroundColor = 'green';
    };
};

<head>このようにタグの間にコードを挿入するだけです

<head>
    <script type="text/javascript">
       // code goes here
    </script>
</head>

例。

于 2013-07-04T08:28:02.840 に答える
0

@ArunPJohny に加えて、CSS を使用することをお勧めします。

.pdf-icon-box:hover .name {
    background-color: orange;
}
.pdf-icon-box .name {
    background-color: green;
}
于 2013-07-04T08:19:39.657 に答える
0

jqueryを使わない理由がわかりません。

$(".pdf-icon-box").hover(function(){
   $(this).find(".name").css("color","yellow") 
    //if you want to change background color
    $(this).find(".name").css("background","yellow")
});
于 2013-07-04T08:24:59.587 に答える
0

SPACE は子です。uの間にスペースがある場合、それを取得できません。

1 つの方法は、コードをスペースなしで記述し、firstChild を使用することです。

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.firstChild.firstChild.style.backgroundColor = 'yellow'"; onmouseout="this.firstChild.firstChild.style.backgroundColor = 'green'"; ><span class="pdf-style"><span class="name" style="display:inline-block;"> T E S T </span></span></div>

2 番目の方法は、もう一度 childNodes[childelement] を使用することです。スペース/タブ/改行は子です。

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.childNodes[0].childNodes[0].style.backgroundColor = 'yellow'"; onmouseout="this.childNodes[0].childNodes[0].style.backgroundColor = 'green'"; ><span class="pdf-style"><span class="name" style="display:inline-block;"> T E S T </span></span></div>

3 番目の方法は、className を使用することです

<div class="pdf-icon-box" style="position:relative;" onmouseover="this.getElementsByClassName('name')[0].style.backgroundColor = 'yellow'"; onmouseout="this.getElementsByClassName('name')[0].style.backgroundColor = 'green'"; >
 <span class="pdf-style">
  <span class="name" style="display:inline-block;"> T E S T </span>
 </span>
</div>

しかし、それは良い方法ではありません。CSS を使用する

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.name{background-color:yellow;}
.name:hover{background-color:green;}
</style>
<body>
<div class="pdf-icon-box" style="position:relative;">
 <span class="pdf-style">
  <span class="name"> T E S T </span>
 </span>
</div>
</body>
</html>
于 2013-07-04T08:36:57.107 に答える