Within the 'Pinctitle' area, there is text that I want to change each time a Pselectorbutton is hovered over with a fading effect. Additionally, I would like the image inside the 'Pselectorbutton' to change at the same time.
Currently, I have the image set as a background image. I was considering using hover to achieve this effect, but I am aware that the related div must be used, so I may need to incorporate some JQuery into my page.
Is it possible to accomplish this entirely using 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)
} <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>