66

JavaScript を使用してクラスの CSS プロパティを変更したいと考えています。私が実際に望んでいるのは、 a<div>がホバーされたときに、別のもの<div>が見えるようになることです。

.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
  display: none;
}
<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
    Bye
  </div>
  <div class="right1">
    Bye1
  </div>
</div>
<div class="right">
  Hello2
</div>

hello1 div をホバーすると bye1 div が表示され、同様に hello2 をホバーすると bye2 が表示されます。

4

8 に答える 8

79

styleこれにはプロパティを使用できます。たとえば、境界線を変更したい場合 -

document.elm.style.border = "3px solid #FF0000";

同様に色について -

 document.getElementById("p2").style.color="blue";

最善のことは、クラスを定義してこれを行うことです-

document.getElementById("p2").className = "classname";

(クロス ブラウザー アーティファクトは、それに応じて考慮する必要があります)。

于 2013-03-06T08:05:22.430 に答える
7

を使用しdocument.getElementsByClassName('className').style = your_styleます。

var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";

html 属性の二重引用符内に含まれる JS 文字列には単一引用符を使用します

例

<div class="somelclass"></div>

それからdocument.getElementsByClassName('someclass').style = "NewclassName";

<div class='someclass'></div>

それからdocument.getElementsByClassName("someclass").style = "NewclassName";

これは個人的な経験です。

于 2013-03-06T08:03:42.967 に答える
0

参考までに、これは、HTML と CSS をわずかに変更するだけで CSS のみで実行できます。

HTML:

<div class="left">
    Hello
</div>
<div class="right">
    Hello2
</div>
<div class="center">
       <div class="left1">
           Bye
    </div>
       <div class="right1">
           Bye1
    </div>    
</div>

CSS:

.left, .right{
    margin:10px;
    float:left;
    border:1px solid red;
    height:60px;
    width:60px
}
.left:hover, .right:hover{
    border:1px solid blue;
}
.right{
     float :right;
}
.center{
    float:left;
    height:60px;
    width:160px
}

.center .left1, .center .right1{
    margin:10px;
    float:left;
    border:1px solid green;
    height:60px;
    width:58px;
    display:none;
}
.left:hover ~ .center .left1 {
    display:block;
}

.right:hover ~ .center .right1 {
    display:block;
}

およびデモ: http://jsfiddle.net/pavloschris/y8LKM/

于 2013-03-06T09:18:38.277 に答える
-1 
var hello = $('.right') // or var hello = document.getElementByClassName('right')
var bye = $('.right1')
hello.onmouseover = function()
{
    bye.style.visibility = 'visible'
}
hello.onmouseout = function()
{
    bye.style.visibility = 'hidden'
}
于 2013-03-06T08:04:38.903 に答える
-3

これは jQuery を使用すると非常に簡単です。

例えば：

$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});

私はあなたのフィドルを更新しました： http://jsfiddle.net/TqDe9/2/

于 2013-03-06T08:05:59.700 に答える