Question

所以我创建了这个页面，其中2x2方向有4张图像幻灯片。现在我对html和css仍然很新，所以我不确定我的代码的哪一部分导致了这一点。

我用于滑块的css都是一样的，但当我将鼠标悬停在一个元素上时，右侧的滑块会一直闪烁。这是我正在处理http://website-testing.site88.net/Smile.html的页面。

代码示例如下：

    <input type="radio" name="slide1" id="S1_I1" checked>
    <input type="radio" name="slide1" id="S1_I2">
    <input type="radio" name="slide1" id="S1_I3">
    <input type="radio" name="slide1" id="S1_I4">

<ul id="container">
    <li class="left"> Placeholder 
      <div class="slides_container"> 
        <div class="slides">
        <ul>
            <li><div class="img">
                  <img src="pic/pic_1.jpeg">
                </div>
                <div class="nav">
                    <label for="S1_I2" class="next">&#x203a;</label>
                </div>
            </li>
            <li><div class="img">
                  <img src="pic/pic_2.jpg">
                </div>
                <div class="nav">
                    <label for="S1_I1" class="prev">&#x2039;</label>
                    <label for="S1_I3" class="next">&#x203a;</label>
                </div>
            </li>
            <li><div class="img">
                  <img src="pic/pic_3.jpg">
                </div>
                <div class="nav">
                    <label for="S1_I2" class="prev">&#x2039;</label>
                    <label for="S1_I4" class="next">&#x203a;</label>
                </div>
            </li>
            <li><div class="img">
                  <img src="pic/pic_2.jpg">
                </div>
                <div class="nav">
                    <label for="S1_I3" class="prev">&#x2039;</label>
                </div>
            </li>
        </ul>
        </div>
        </div>  
    </li>

任何可能导致这种情况的想法？这也是我第一次创建一个网站，所以在其他浏览器上看起来很难看，因为我不确定如何使它们看起来兼容

Answer 1

导致它的原因是这段代码：

/* -webkit-columns: 2; */
-moz-columns: 2;
-o-columns: 2;
columns: 2;

您可以在文件内FIRST行的smile.css中找到它。

拿出来，它不再闪光了。但是你将不得不移动一些东西，因为它会稍微弄乱你所拥有的图像。无论如何，不要使用columns:2，你应该没事。

与其他元素交互时图像闪烁

1 个答案: