#html #class #hyperlink
Вопрос:
Здесь у меня есть примерная версия того, что я пытаюсь сделать. Я не уверен, чего мне не хватает, но я определенно чего-то не хватает. Обе флипкарты ведут к одной и той же ссылке, и я не могу заставить их быть отдельными, когда я меняю одну, меняется и другая. Я пытался создать отдельный класс, но, думаю, сделал это неправильно. Также интересно, как исправить задержку, возникающую для второй флипкарты. Заранее спасибо.
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;stylegt; * { box-sizing: border-box; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 280px; padding: 0px; height: 220px; /* Should be removed. Only for demonstration */ } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the four columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="row"gt; lt;div class="column" style="background-color:#aaa;"gt; lt;htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;stylegt; .fliptext1 body { font-family: Arial; text-align: center; } .flip-card1 { background-color: transparent; width: 280px; height: 220px; perspective: 1000px; } .flip-card-inner1 { position: relative; width: 280px; height: 220px; text-align: center; transition: transform 0.9s; transform-style: preserve-3d; box-shadow: 0 0px 0px 0 rgba(0,0,0,0); } .flip-card1:hover .flip-card-inner1 { transform: rotateY(180deg); } .flip-card-front1, .flip-card-back1 { position: absolute; width: 280px; height: 220px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-card-front1 { background-color: #bbb; color: black; } .flip-card-back1 { background-color: #354C2F; color: white; width: 280px; height: 220px; transform: rotateY(180deg); font-family: Arial; text-align: center; padding: 0px; background-image: url(''); } a.link1{ href="https://yorku.ca/research" target="https://yorku.ca/research"} lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="flip-card1"gt; lt;div class="flip-card-inner1"gt; lt;div class="flip-card-front1"gt; lt;img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;"gt; lt;/divgt; lt;div class="flip-card-back1"gt; lt;a class="link1" href="https://yorku.ca/research"gt; lt;img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png" width="280" height="220"gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="column" style="background-color:#bbb;"gt; lt;htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;stylegt; .fliptext2 body { font-family: Arial; text-align: center; } .flip-card2 { background-color: transparent; width: 280px; height: 220px; perspective: 1000px; } .flip-card-inner2 { position: relative; background-color: #354C2F; width: 280px; height: 220px; text-align: center; transition: transform 0.9s; transform-style: preserve-3d; box-shadow: 0 0px 0px 0 rgba(0,0,0,0); } .flip-card2:hover .flip-card-inner2 { transform: rotateY(180deg); } .flip-card-front2, .flip-card-back2 { position: absolute; width: 280px; height: 220px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-card-front2 { background-color: #bbb; color: black; } .flip-card-back2 { background-color: #354C2F; color: white; width: 280px; height: 220px; transform: rotateY(180deg); font-family: Arial; text-align: center; padding: 0px; background-image: url(''); } a.link2{ href="https://yorku.ca/c4" target="https://yorku.ca/c4"} lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="flip-card2"gt; lt;div class="flip-card-inner2"gt; lt;div class="flip-card-front2"gt; lt;img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;"gt; lt;/divgt; lt;div class="flip-card-back2"gt; lt;a class="link2" href="https://yorku.ca/c4"gt; lt;img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png" width="280" height="220"gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. привет, Пол, когда я запускаю код, конечный результат приводит к исследовательскому веб-сайту для обеих карт
Ответ №1:
Проблема в том, что структура документа неправильная, у вас 2 основных элемента и т. Д. Вот, я починил его для тебя. Возможно, придется положить карты рядом.
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt; lt;stylegt; * { box-sizing: border-box; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 280px; padding: 0px; height: 220px; /* Should be removed. Only for demonstration */ } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the four columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="row"gt; lt;div class="column" style="background-color: #aaa"gt; lt;htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt; lt;stylegt; .fliptext1 body { font-family: Arial; text-align: center; } .flip-card1 { background-color: transparent; width: 280px; height: 220px; perspective: 1000px; } .flip-card-inner1 { position: relative; width: 280px; height: 220px; text-align: center; transition: transform 0.9s; transform-style: preserve-3d; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0); } .flip-card1:hover .flip-card-inner1 { transform: rotateY(180deg); } .flip-card-front1, .flip-card-back1 { position: absolute; width: 280px; height: 220px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-card-front1 { background-color: #bbb; color: black; } .flip-card-back1 { background-color: #354c2f; color: white; width: 280px; height: 220px; transform: rotateY(180deg); font-family: Arial; text-align: center; padding: 0px; background-image: url(""); } .flip-card2 { background-color: transparent; width: 280px; height: 220px; perspective: 1000px; } .flip-card-inner2 { position: relative; background-color: #354c2f; width: 280px; height: 220px; text-align: center; transition: transform 0.9s; transform-style: preserve-3d; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0); } .flip-card2:hover .flip-card-inner2 { transform: rotateY(180deg); } .flip-card-front2, .flip-card-back2 { position: absolute; width: 280px; height: 220px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-card-front2 { background-color: #bbb; color: black; } .flip-card-back2 { background-color: #354c2f; color: white; width: 280px; height: 220px; transform: rotateY(180deg); font-family: Arial; text-align: center; padding: 0px; background-image: url(""); } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="flip-card1"gt; lt;div class="flip-card-inner1"gt; lt;div class="flip-card-front1"gt; lt;img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width: 280px; height: 220px" /gt; lt;/divgt; lt;div class="flip-card-back1"gt; lt;a class="link1" href="https://yorku.ca/research" target="https://yorku.ca/research" gt; lt;img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png" width="280" height="220" /gt; lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="column" style="background-color: #bbb"gt; lt;div class="flip-card2"gt; lt;div class="flip-card-inner2"gt; lt;div class="flip-card-front2"gt; lt;img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width: 280px; height: 220px" /gt; lt;/divgt; lt;div class="flip-card-back2"gt; lt;a class="link2" href="https://yorku.ca/c4" target="https://yorku.ca/c4" gt; lt;img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png" width="280" height="220" /gt; lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. большое вам спасибо!! не могли бы вы объяснить, что вы сделали и где я ошибся, чтобы я мог исправить их в будущем?