JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<div class="box-container">
    <div class="hardware">
        <div>
            <p class="hardware">hardware</p>
        </div>
        <div>
            <p class="hardware-desc">your text goest here
                <br />your text goest here your text goest here your text goest here</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="software">
        <div>
            <p class="software">software</p>
        </div>
        <div>
            <p class="software-desc">your text goest here
                <br />your text goest here your text goest here your text goest here</p>
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

.box-container {
    border:dotted thin #f00;
    width:60px;
    padding:20px;
}
p {
    float:left;
    margin-right:20px;
}
div.hardware:hover, div.software:hover {
    background:#00f;
}
.clear {
    clear:both;
}
.software-desc, .hardware-desc {
    display:none;
    z-index:100;
    position:absolute;
    margin-left:70px;
    background:#00f;
}

JavaScript

$(document).ready(function(){
 
    $('div.hardware').hover(
		function(){
    		$("p.hardware-desc").show();
    },
        function(){
    		$("p.hardware-desc").hide();
    }
    );
    $('div.software').hover(
		function(){
    		$("p.software-desc").show();
    },
        function(){
    		$("p.software-desc").hide();
    }
    );
 
});