<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
500px;
height:600px;
background-color: #2e6da4;
}
.left{
float:left;
30%;
background-color: goldenrod;
}
.right{
float: right;
70%;
height: 100%;
background-color: orchid;
}
.hide{
display: none;
}
.willShow{
float: left;
20%;
height: 50%;
background-color: #5cb85c;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ol>
</div>
<div class="right"><div class="willShow hide">views</div>content</div>
<div style="clear: both">
</div>
</div>
<script src="jquery-3.2.1.slim.js"></script>
<script>
$(function () {
$('li').bind('mouseover',function () {
$('.willShow').removeClass('hide');
})
})
</script>
</body>
</html>