Como alterar a propriedade css usando javascript

Question

Como alterar a propriedade css usando javascript

quero mudar a propriedade css da classe usando javascript. O que eu realmente quero é quando um div é hoverd, outro div deve tornar-se visível.

A minha css é tipo....

.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;
}

e o ficheiro html é como..

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

Quando o div hello1 é pairado, o div bye1 deve ser visível e, da mesma forma, o bye2 deve aparecer quando o hello2 é pairado.

Http://jsfiddle.net/rohan23dec/TqDe9/1/

5

css javascript hover

Author: Rohan Das, 2013-03-06

Source

6 answers

score 10 · Answer 1

Pode usar style Propriedade para isto. Por exemplo, se quiser mudar de fronteira -

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

Similarmente para a cor -

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

O melhor é definires uma classe e fazeres isto.

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

(os artefactos do navegador cruzado devem ser considerados em conformidade).

score 2 · Answer 2

Utilizar document.getElementsByClassName('className').style = your_style.

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

Usar aspas simples para os strings JS contidos dentro das aspas de um atributo html

Exemplo

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

Então ... document.getElementsByClassName('someclass').style = "NewclassName";

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

Então ... document.getElementsByClassName("someclass").style = "NewclassName";

Isto é experiência pessoal.

score 0 · Answer 3

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'
}

score 0 · Answer 4

Com Jquery:
.Hover (...)

assim como:

$(".left").hover(function(){ $(".left1").toggle() } );
$(".right").hover(function(){ $(".right1").toggle()} );

Ir ao jsFiddle para ver em acção

score 0 · Answer 5

Apenas para a informação, isto pode ser feito com CSS apenas com pequenas alterações HTML e 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;
}

E a DEMO: http://jsfiddle.net/pavloschris/y8LKM/

score -2 · Answer 6

É muito fácil usar jQuery.

Por exemplo:

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

Eu actualizei o teu violino.: http://jsfiddle.net/TqDe9/2/