使用多个div更改单个文本区域并更改div图像

Question

我在'Pinctitle'区域有文字。我希望每次Pselector按钮上的一个淡入淡出时都会改变它。同时我希望'Pselectorbutton'改变其中的图像。

目前我将它设置为背景图像。我打算用悬停来实现这个目的，但是我知道它必须是一个相关的div，所以我想我可能需要将一些Jquery带入我的页面。

这可以完全用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>

Answer 1

你正在寻找这样的东西吗？ 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);
});