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.
6 answers
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).
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.
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'
}
Com Jquery:
.Hover (...)
assim como:
$(".left").hover(function(){ $(".left1").toggle() } );
$(".right").hover(function(){ $(".right1").toggle()} );
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/
Por exemplo:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
Eu actualizei o teu violino.:
http://jsfiddle.net/TqDe9/2/