JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="Pselectorinside">
       <div class="Pincludes">PROJECT INCLUDES
        </div>
        <div class="Pinctitle">Photography
        </div>
        
    <div class="Pselectorrow">
            <div class="Pselectorbutton one" data-title="Flowers">
            </div>
            <div class="Pselectorbutton two" data-title="Pets">
            </div>
            <div class="Pselectorbutton three" data-title="Babies">
            </div>
        </div>
    </div>

CSS

.Pselectorinside {
    	position: relative;
    }
    
    .Pincludes {
    	font-size: 12px;
    }
    
    .Pinctitle {
    	font-size: 21px;
    }
    
    .Pselectorrow {
    	width: 100%;
    	margin-left: -21px;
    }
    
    .Pselectorbutton {
    	float: left;
    	width: 30px;
    	height: 30px;
    	margin-left: 21px;
    	background-color: blue;
    }
    
    .Pselectorbutton .one{
    	background-image: url(../images/oneA.jpg)
    }
    
    .Pselectorbutton .one:hover{
    	background-image: url(../images/oneB.jpg)
    }
    
    .Pselectorbutton .two{
    	background-image: url(../images/twoA.jpg)
    }
    
    .Pselectorbutton .two:hover{
    	background-image: url(../images/twoB.jpg)
    }
    
    .Pselectorbutton .three{
    	background-image: url(../images/threeA.jpg)
    }
    
    .Pselectorbutton .three{
    	background-image: url(../images/threeB.jpg)
    }

JavaScript

var originalTitle = $('.Pinctitle').text();

$('body').on('mouseenter', '.Pselectorbutton', function(){
    var text = $(this).data('title');
    $('.Pinctitle').text(text);
});
$('body').on('mouseleave', '.Pselectorbutton', function(){
    $('.Pinctitle').text(originalTitle);
});