想要实现如下效果:
当点击右边的其中一栏时,增加选中效果,如图:
部分代码:`<div id="pic-right">
<div class="right" id="right1">
<div class="pic1">PIC</div>
<div class="jieshao">
<h3>TITLE OF HIGHLIGHT</h3>
<h4>Short descriptions of the highlight on the left.</h4>
</div>
<div class="xiajiao">
<img src="images/xiajiao.png">
</div>
</div>
<div class="right" id="right2">
<div class="pic1">PIC</div>
<div class="jieshao">
<h3>TITLE OF HIGHLIGHT</h3>
<h4>Short descriptions of the highlight on the left.</h4>
</div>
<div class="xiajiao">
<img src="images/xiajiao.png">
</div>
</div>
<div class="right" id="right3">
<div class="pic1">PIC</div>
<div class="jieshao">
<h3>TITLE OF HIGHLIGHT</h3>
<h4>Short descriptions of the highlight on the left.</h4>
</div>
<div class="xiajiao">
<img src="images/xiajiao.png">
</div>
</div>
</div>`
个人觉着选中右侧缩略图+描述左侧增加小三角可以使用伪元素:after或者:before进行绝对定位不占用原有空间的。