Question

当我再次单击箭头以查看下一张幻灯片箭头消失，直到我再次移动鼠标时，我遇到了问题。我想知道当指针悬停在箭头上时，是否有可能像第一次点击一样保持箭头。

以下是Jsfiddle https://jsfiddle.net/2hmb60w0/

的链接

HTML

<form class="sliders">
    <input type="radio" name="slider-choice" id="first-slider" checked />
    <div class="slider-container">
        <div class="slider">
            <p>Some Random Text...</p>
        </div>
        <div class="nav">
            <label for="second-slider" class="prev"></label>
            <label for="second-slider" class="next"></label>
        </div>
    </div>

    <input type="radio" name="slider-choice" id="second-slider" />
    <div class="slider-container">
        <div class="slider">
            <p>Even Some More Random Text...</p>
        </div>
        <div class="nav">
            <label for="first-slider" class="prev"></label>
            <label for="first-slider" class="next"></label>
        </div>
    </div>
</form>

CSS

.sliders {
    width: 600px;
    position: relative;
}

.sliders input{ 
    display: none; 
}

.slider {
    position: absolute;
    opacity: 0;
    width: 600px;
    transform: scale(0);
    transition: all .6s ease-in-out;
}

.nav label {
  margin-top: 65px;
    width: 85px;
    display: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s;
    color: black;
    font-size: 6em;
    text-align: center;
    background-color: rgba(100, 100, 100, .6);
}

.slider:hover + .nav label, .slider:focus + .nav label{ 
    opacity: 0.6; 
}

.nav label:hover, .nav label:focus{ 
    opacity: 1; 
}

.nav .next{ 
    right: 0;
}

.prev:before{
    content: '\2770';
}

.next:before{
    content: '\2771';
}

input:checked + .slider-container .slider{
    opacity: 1;
    transform: scale(1);
    transition: opacity 2s ease-in-out;
}

input:checked + .slider-container .nav label{ 
    display: block; 
}

p{
    padding: 100px 20px;
    width: 560px;
    text-align: center;
    background: #dae1ef;
}

Answer 1

将z-index添加到导航标签以修复此

objectId

Answer 2

如果您更改.nav标签的不透明度，您可以始终在任何级别显示箭头：

.nav label {
 margin-top: 65px;
 width: 85px;
 display: none;
 position: absolute;
 opacity: 0.5;   //I set this to 0.5 (50%), so it is always visible.
                 //moving the mouse will make it more solid though
 cursor: pointer;
 transition: opacity .2s;
 color: black;
 font-size: 6em;
 text-align: center;
 background-color: rgba(100, 100, 100, .6);
 }

那是你想做的吗？

Answer 3

我想出了我需要做的事情。以下是我为解决问题而添加的内容。

CSS

register_shutdown_function('shutdownHandler');

CSS查看麻烦？

3 个答案: