JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div style="background:#00ac7a;height:400px; width:700px; margin:0 auto;">
<div style="float:left;width: 200px;">
<a id="ludzik-szyja-link">SZYJA</a><br>
<a id="ludzik-tulow-link">TUŁÓW</a>
</div>
<div class="ludzik"></div>
<div id="linki-1">
<p style="color:#fff">szyja</p>
</div>
<div id="linki-2">
<p style="color:#fff">tułów</p>
</div>
</div>
CSS
.ludzik{
background:url('../images/ludzik.png') no-repeat;
width:196px;
height:385px;
float:left;
}
#ludzik-szyja-link{
color:#fff;
cursor:pointer;
}
#ludzik-tulow-link{
color:#fff;
cursor:pointer;
}
.ludzik-szyja{
background:url('../images/ludzik-szyja.png') no-repeat!important;
}
.ludzik-szyja-zostaw{
background:url('../images/ludzik-szyja.png') no-repeat!important;
}
.ludzik-tulow{
background:url('../images/ludzik-tulow.png') no-repeat!important;
}
.ludzik-tulow-zostaw{
background:url('../images/ludzik-tulow.png') no-repeat!important;
}
#linki-1{
display:none;
}
#linki-2{
display:none;
}
.link-none{
display:none!important;
}
.link-block{
display:block!important;
}
JavaScript
$(document).ready(function(){
$(function(){
//szyja
$('#ludzik-szyja-link').hover(function(){
$(".ludzik").addClass('ludzik-szyja');
}).mouseout(function(){
$(".ludzik").removeClass('ludzik-szyja');
});
$('#ludzik-szyja-link').click(function(){
$(".ludzik").toggleClass('ludzik-szyja-zostaw');
$("#linki-1").toggleClass('link-block');
$("#linki-2").removeClass('link-block');
});
//tulow
$('#ludzik-tulow-link').hover(function(){
$(".ludzik").addClass('ludzik-tulow');
}).mouseout(function(){
$(".ludzik").removeClass('ludzik-tulow');
});
$('#ludzik-tulow-link').click(function(){
$(".ludzik").toggleClass('ludzik-tulow-zostaw');
$("#linki-2").toggleClass('link-block');
$("#linki-1").removeClass('link-block');
});
});
});