html - 在事件部分之间转换图像时出现问题

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;
}

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