Изображения в сетке мерцают при выборе!
Я сделал проект изображения, в котором я выбираю изображение, и оно выделяет выбранное и отображает имя " alt "выбранного изображения в списке(которое работало нормально, пока я не добавил ссылку "more info" к изображению)
Теперь после добавления ссылки "дополнительная информация" с помощью
position:relativeи
position:absoluteJS не извлекает имя изображения, а выбранная граница изображения намного больше, чем я дал, и другие изображения вокруг нее меняют положение вот полный код проекта, если вам нужно проверить JSFiddle
Ниже приведены фрагменты кодов с того места, где я ошибся
HTML
<div class="container" id="imagezone"> <ul id="list"> <li>Image1</li> <li>Image2</li> <li>Image3</li> <li>Image4</li> <li>Image5</li> <li>Image6</li> <li>Image7</li> <li>Image8</li> <li>Image9</li> </ul> <div id="images"> <div class="content"><img id="adj" src="images/Chrysanthemum.jpg" alt="Chrysanthemum" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/desert.jpg" alt="desert" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/Hydrangeas.jpg" alt="Hydrangeas" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/jellyfish.jpg" alt="jellyfish" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/koala.jpg" alt="koala" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/lighthouse.jpg" alt="lighthouse" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/penguins.jpg" alt="penguins" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/tulips.jpg" alt="tulips" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> <div class="content"><img id="adj" src="images/dbz.jpg" alt="dbz" width="300" height="200"><a href="#">more info</a><span>This is some description about the Image.</span></div> </div> </div>
CSS
#images div{ position: relative; float: left; } #images img { position: relative; } #images a { right: 10px; position: absolute; bottom: 10px; color: #ffffff; font-family: cursive; } #images a:hover + span, span:hover { display: block; } span { top: 10px; position: absolute; display: none; left: 10px; padding: 10px; height: calc(100% - 40px); width: calc(100% - 40px); background: rgba(255,255,255,0.7); color: black; overflow: auto; font-family: sans-serif; }
JS
var imgs = document.getElementById("images"); var list = document.getElementById("list"); var cN = "active"; var memory = { "index": 0, "value": "Image1" } for (var i = 0; i < imgs.children.length; i += 1) { (function(i) { imgs.children[i].addEventListener("click", function() { if (memory.position !== i) { list.children[memory.index].innerHTML = memory.value; memory.value = list.children[i].innerHTML; imgs.children[memory.index].className = ""; } memory.index = i; list.children[i].innerHTML = this.alt; imgs.children[i].className = cN; }); })(i); }
Что я уже пробовал:
Я пытался использовать document.getElementByClassName для получения alt-имени изображения, но безуспешно.
Часть изображения я понятия не имею, что происходит, кажется, все правильно, насколько мне известно.