Comment changer une propriété CSS en utilisant JavaScript

Question

Je veux changer une propriété CSS d'une classe en utilisant JavaScript. Ce que je veux en fait, c'est que lorsqu'un

est survolé, un autre

devrait devenir visible.

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

  Bonjour

    Au revoir

    Au revoir1

  Bonjour2

Quand le div hello1 est survolé, le div bye1 devrait être visible et de même bye2 devrait apparaître lorsque hello2 est survolé.

Answer 1

C'est vraiment facile en utilisant jQuery.

Par exemple:

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

J'ai mis à jour votre fiddle : http://jsfiddle.net/TqDe9/2/

Answer 2

Vous pouvez le faire en utilisant jQuery comme suit.

$('.left, .right').on('mouseenter', function(e) {
    if ($(this).attr('class') == 'left1') {
        $('.left1').css({
            /* 'visibility': 'visible', */
            'display': 'block',
        })
    } else if ($(this).attr('class') == 'left1') {
        $('.right1').css({
            /* 'visibility': 'visible', */
            'display': 'block',
        })
    }
})

ou vous pouvez l'utiliser comme ceci

pour le premier besoin

$('.left').on('mouseenter', function(e) {
    $('.left1').css({
        /* 'visibility': 'visible', */
        'display': 'block',
    })
})

pour le deuxième besoin

$('.right').on('mouseenter', function(e) {
    $('.right1').css({
        /* 'visibility': 'visible', */
        'display': 'block',
    })
})