Question

我需要帮助来解决网格中的一些问题。您可以看到网站here（只需点击搜索按钮并向下滚动即可查看项目。）

1）当它们全部被点击时，6列相互重叠（屏幕1和2）。尝试点击它们中的每一个来重现这一点。我想要坚持原来的位置。基本上带文本和音频播放器的div应该只替换图像（onclick）

html示例

<div class="row">
            <div class="col-sm-4">
                <img id="img1" onclick="play(1)" src="data/img/portfolio/fox.jpg" class="img-responsive img-animals" alt="Fox">
                <div class="inner_text_img" id="inner1">
                    <h3>Red Fox - <a class="stopsound" onclick="stop(1)">X</a></h3>
                    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                    <audio class="audio_player" id="audio1" src="data/sound/animals/fox.mp3" type="audio/mpeg"></audio>
                </div> 
            </div>
            <div class="col-sm-4">
              ....

CSS

audio{
  width: 100%;
}

.inner_text_img{
  max-width: 360px;
  max-height: 260px;
}
.col-sm-4:hover img{
  opacity: 0.5;
}

.inner_text_img{
  width: 100%;
  height: 100%;
  color: red;
  position: absolute;
  color: #2C3E50;
  top:0px;
  left:0px;
  display:none;
}

.inner_text_img{
    background-color: #f3f3f3;
}

js切换div并开始/停止音频

function play(n) {

    var audio = document.getElementById("audio" + n);
    var inner_el = document.getElementById("inner" + n);
    var img = document.getElementById("img" + n);

    if (audio.paused) {
        img.style.display = 'none';
        inner_el.style.display = 'block';
        audio.controls = true;
        audio.play();
        audio.loop = true;
    } else {
        img.style.display = 'block';
        inner_el.style.display = 'none';
        audio.controls = false;
        audio.pause();
    }
}

function stop(n) {
    var audio = document.getElementById("audio" + n);
    var inner_el = document.getElementById("inner" + n);
    var img = document.getElementById("img" + n);

    img.style.display = 'block';
    inner_el.style.display = 'none';
    audio.controls = false;
    audio.pause();

}

编辑为一个问题

谢谢你！

Answer 1

删除position: absolute样式中的.inner_text_img {}

Css重叠div与多个孩子

1 个答案: