您可以使用style属性来实现这一点。例如，如果您想更改边框-

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

类似地，对于颜色-

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

最好的方法是定义一个类然后这样做-
document.getElementById("p2").className = "classname";
（必须相应地考虑跨浏览器工件）。

// select element from DOM using *const*
const sample = document.getElementById("myid"); // using const
// or you can use *var*
var sample = document.getElementById("myid"); // using var

// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; // Replaces all style properties. NOT RECOMENDED

使用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";

这是个人经历

请考虑以下示例：如果你想改变一个CSS属性（比如把color改成blue），下面的语句就可以了。

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

但是，对于改变多个属性，更鲁棒的方法是使用Object.assign()或object spread operator {...};

如下：

const ele=document.getElementById("ele_id");
const custom_style={
    display: "block",
    color: "red"
}

//Object.assign():
Object.assign(ele.style,custum_style);

Spread运算符的工作原理类似，只是语法略有不同。

仅供参考，这可以用CSS来完成，只需要对HTML和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;
}

关于DEMO：http://jsfiddle.net/pavloschris/y8LKM/

使用jQuery很简单。
例如：

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

我更新了你的小提琴：http://jsfiddle.net/TqDe9/2/

你可以这样使用jQuery。

$('.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',
        })
    }
})

或者你可以这样用

第一个要求

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

第二个要求

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