jquery - Change single text area with multiple div and change the div image -

jquery - Change single text area with multiple div and change the div image -

i have text in area 'pinctitle'. want alter each time 1 of pselectorbuttons hovered on fade. @ same time want 'pselectorbutton' alter image within it.

currently have set background image. going effort accomplish hover, understand has related div assume may need bring jquery in page.

can done exclusively in css?

class="snippet-code-css lang-css prettyprint-override"> .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) } class="snippet-code-html lang-html prettyprint-override"> <div class="pselectorinside"> <div class="pincludes">project includes </div> <div class="pinctitle">photography </div> <div class="pselectorrow"> <div class="pselectorbutton one"> </div> <div class="pselectorbutton two"> </div> <div class="pselectorbutton three"> </div> </div> </div>

are looking this? jsfiddle

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); });

jquery html css