<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
* {
margin: 0;
padding: 0;
border-style: none;
list-style: none;
}
#outer {
height: 200px;
width: 220px;
margin: 100px;
}
ul {
border-top: #8E2780 solid 1px;
}
ul li {
cursor: pointer;
float: left;
margin: 0;
padding: 4px 15px;
background-color: lightgray;
border: 1px solid #887A7A;
border-collapse: collapse;
}
ul li:hover {
background-color: #fff;
border-style: none;
}
div {
}
dt, dd {
float: left;
}
.hide {
display: none;
}
.l-show {
}
</style>
    <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
<div id="outer">
      <ul>
    <li>娱乐</li>
    <li>电视</li>
    <li>电影</li>
  </ul>
      <div class="l-show current">
    <dl>
          <dt><img src="images/01.jpg"/></dt>
          <dd>
        <p>园子温"魔鬼</p>
        <p>园子温"魔鬼</p>
        <p>园子温"魔鬼</p>
        <p>园子温"魔鬼</p>
        <p>园子温"魔鬼</p>
      </dd>
        </dl>
  </div>
      <div class="l-show hide">
    <dl>
          <dt><img src="images/02.jpg"/></dt>
          <dd>
        <p>333</p>
        <p>333</p>
        <p>333</p>
        <p>园333鬼</p>
        <p>333魔鬼</p>
      </dd>
        </dl>
  </div>
      <div class="l-show hide">
    <dl>
          <dt><img src="images/03.jpg"/></dt>
          <dd>
        <p>园子温"魔鬼</p>
        <p>园2魔鬼</p>
        <p>园2"魔鬼</p>
        <p>园2魔鬼</p>
        <p>2鬼</p>
      </dd>
        </dl>
  </div>
    </div>
<script>
$(document).ready(function(e) {
            $("#outer ul li").hover(function(){
console.log("click");
var liIndex=$(this).index();
//$(this).parent().siblings().addClass("hide");
//$(this).parent().siblings().eq(liIndex).removeClass("hide");
$(this).parent().siblings().addClass("hide").eq(liIndex).removeClass("hide");
});
        });
    </script>
</body>
</html>