Container onclick在視頻元素和文本之間切換

我試圖創建一個div類，當單擊時，在懸停播放的視頻元素或文本段落之間切換。每個填充容器的內部。理想情況下容器應該與瀏覽器窗口一起伸縮。Container onclick在視頻元素和文本之間切換

.box { 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    border: dotted red; 
 
    position: relative; 
 
} 
 

 
.text { 
 
    font-size: 2vw; 
 
    opacity: 1; 
 
    z-index: 1; 
 
} 
 

 
.text>video { 
 
    display: none; 
 
} 
 

 
.vid>text { 
 
    position: absolute; 
 
    opacity 0; 
 
} 
 

 
.vid>video { 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("a").click(function() { 
 
     $("a").toggleClass("vid, text"); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div class="box"> 
 
    <a class="vid"> 
 
     <video autoplay muted><source src=assets/IMG_1353.MOV></video> 
 
     <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut suscipit magna, ac imperdiet diam. Pellentesque quis tellus et nisi luctus efficitur vitae in quam. In maximus aliquam dui sed vulputate. Duis sed urna in ipsum efficitur ultricies 
 
     at sit amet ligula. Curabitur feugiat placerat velit a mollis. Phasellus ac mollis metus. Pellentesque condimentum urna eu ex vulputate semper. Fusce pulvinar, dui id convallis aliquam, elit lectus convallis tellus, sit amet semper lectus nisl 
 
     vehicula enim. Curabitur est augue, pharetra non orci vitae, rutrum fermentum nunc. Curabitur a tempor elit, et fermentum erat. Etiam iaculis nulla vitae nisl pretium venenatis. Maecenas convallis placerat vestibulum. Duis vel interdum quam. Nunc 
 
     ultricies elit ut dolor bibendum commodo. Nam mollis diam tellus, non imperdiet purus facilisis in.Aliquam vitae malesuada lacus, a eleifend justo. Mauris in condimentum nisi, vel pulvinar magna. Suspendisse nibh augue, scelerisque in suscipit 
 
     id, interdum sed arcu. Cras semper varius ante. Integer mollis, tellus quis interdum porttitor, ipsum dui venenatis elit, ut luctus magna est eu ex. Praesent pretium purus nisi. Duis pharetra aliquet diam, sed tincidunt enim. Mauris nunc sapien, 
 
     mattis sed tincidunt sed, bibendum id eros. Pellentesque velit arcu, viverra id ipsum vel, venenatis hendrerit purus. Ut auctor quis ligula non laoreet. Proin id porta sapien. Nunc et felis id augue ultricies sollicitudin eget pellentesque justo. 
 
     Etiam magna neque, tincidunt a quam in, varius suscipit quam. Cras tincidunt feugiat ex sit amet interdum. Aliquam sagittis turpis eu pulvinar convallis. Donec imperdiet euismod nisl et faucibus.</div> 
 
    </a> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-09-01 jehm

有一對夫婦在你的代碼片段不好的事情：1）你應該不是真的會改變一個錨標記的點擊行爲。也許可以使用簡單的'