0

该网站上的第一条消息。

无论如何，我的问题是这样的：

<section class="background-pourqui">
<div class="col-first-child2">
    <div id="image-box">
        <div class="img-box">
            <span class="img-legend">
                le texte 1
            </span>
        <img class="boxpourquiimage" id="image1" src="Images/boxpourqui1.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 2
            </span>
        <img class="boxpourquiimage" id="image2" src="Images/boxpourqui2.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 3
            </span>
        <img class="boxpourquiimage" id="image3" src="Images/boxpourqui3.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 4
            </span>
        <img class="boxpourquiimage" id="image4" src="Images/boxpourqui4.png" alt="#" />
        </div>
        <div class="img-box">
            <span class="img-legend">
                le texte 5 
            </span>
        <img class="boxpourquiimage" id="image5" src="Images/boxpourqui5.png" alt="#" /></div>
    </div>
</div>

<script>
$(".img-box img").click(function(e) {

    var target = $(this).parent().find('.img-legend');
    $('.img-box').each(function(index, element) {
        $(this).find('.img-legend').not(target).fadeOut(100)
    });
    $(this).parent().find('.img-legend').fadeToggle(100);

});


<div class="col2">

</div>

CSS

span {
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
display:none;
padding:0 20px;}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);}
.img-box{
position:relative;}
.img-box span{
display:none;}
.img-legend{
right:0;
padding-right:10px;
display:none;
float: right;
position: fixed;

}

我的目标是获得一个功能javascript，当我单击图像时，它将显示一个大约 300px 高度的文本框并保持在右侧 div id="#col2" 的中心，我希望文本在什么时候改变单击其他图像，但文本框保持在同一位置而不移动。

4

0 回答 0