Question

我正在进行虚拟导览，其中涉及用户根据他们想要去的位置点击箭头图像，然后将显示相应位置的新图像。我想在用户点击时逐渐在图像之间转换，但是我在这个特定的上下文中遇到了麻烦。这些是我在HTML中的基础知识：

<div id="tour_images" class="pics">
            <section id="beginning">
                <div class ="arrow">
                    <a href="#two">
                        <img src="turnRight.png" alt="Right Arrow"/>
                    </a>
                </div>
                <img src="imgs/beginning.jpg" />
            </section>
            <section id="two">
                <div class="arrow">
                    <a href="#three">
                        <img src="turnRight.png" alt="Right Arrow"/>
                    </a>
                </div>
                <div>
                    <img src ="imgs/two.jpg" />
                </div>
            </section>
            <section id="three">
                <div class="arrow">
                    <a href="#four">
                        <img src="turnRight.png" alt="Right Arrow"/>
                    </a>
                </div>
                <div>
                    <img src ="imgs/three.jpg" />
                </div>
            </section>
            <section id="four">
                <div class="arrow">
                    <a href ="#beginning">
                        <img src="turnRight.png" alt="Right Arrow"/>
                    </a>
                    <div>
                        <img src ="imgs/four.jpg" />
                    </div>
                </div> 
            </section>

这是我的CSS：

section {
    display:none; 
} 

section:target{ 
    display:block;
}

section img {
    opacity: 0;
    transition: 500ms opacity;
}

section:target img {
    opacity: 1; 
}

正如预期的那样，目标部分会在点击时显示，但点击图像的转换不起作用（而是立即弹出图像）。谁能看到我在这里做错了什么？

更新：我已经设法提出了一个解决方案，其中涉及将CSS更改为以下内容（请注意，开头有一个按钮，一旦点击，显示第一部分）：

section {
    opacity: 0;
    transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -khtml-transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    height: 0; 
    overflow: hidden;
}

section:target{ 
    display:block;
    opacity: 1;
    height: auto;
}

Answer 1

根据浏览器及其版本的不同，您可能需要包含特定规则：

section img {
    opacity: 0;
    transition: 500ms opacity;
    -o-transition: 500ms opacity;
    -ms-transition: 500ms opacity;
    -moz-transition: 500ms opacity;
    -khtml-transition: 500ms opacity;
    -webkit-transition: 500ms opacity;
}

是的，这很烦人，但有时需要。

无法在活动部分之间转换图像

1 个答案: