"background color change on hover"
Bootstrap 4.1.1 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-2 left"> <ul> <li><a href="#">Red</a></li> <li><a href="#">Green</a></li> <li><a href="#">Blue</a></li> <li><a href="#">Orange</a></li> <li><a href="#">Purple</a></li> </ul> </div> <div class="col-2 right"> <p>loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlorem loremloremloremloremloremloremloremloremloremloremloremloremlormloremloremloremloremloremloremloremloremloremloremlorem loremloremloremloremloremloremloremloremloremloremloremloremloremlorem</p> </div> </div>
body { margin:0; padding:0; font-family: sans-serif; } .row { width:100%; height:100vh; } .row .col-2 { position:relative; width:50%; height:100%; } .row .col-2.left { position:relative; } .row .col-2.left ul { margin:0; padding:100px; } .row .col-2.left ul li { list-style:none; height:60px; } .row .col-2.left ul li:before { content:''; position:absolute; top:0; left:100%; width:100%; height:100%; z-index:1; opacity:0; } .row .col-2.left ul li:hover:before { opacity:1; } .row .col-2.left ul li:nth-child(1):hover:before { background:red; } .row .col-2.left ul li:nth-child(2):hover:before { background:Green; } .row .col-2.left ul li:nth-child(3):hover:before { background:Blue; } .row .col-2.left ul li:nth-child(4):hover:before { background:Orange; } .row .col-2.left ul li:nth-child(5):hover:before { background:Purple; } .row .col-2.left ul li a { font-size:40px; font-weight:bold; text-transform:uppercase; color:#ccc; text-decoration:none; } .row .col-2.right { position:relative; background:#000; padding:50px; word-wrap:break-word; box-sizing:border-box; } .row .col-2.right p { position:relative; z-index:1; color:#fff; font-size:30px; }

Related: See More


Questions / Comments: