Jimmy-IN Ответов: 1

Изображения в сетке мерцают при выборе!


Я сделал проект изображения, в котором я выбираю изображение, и оно выделяет выбранное и отображает имя " alt "выбранного изображения в списке(которое работало нормально, пока я не добавил ссылку "more info" к изображению)
Теперь после добавления ссылки "дополнительная информация" с помощью
position:relative
и
position:absolute
JS не извлекает имя изображения, а выбранная граница изображения намного больше, чем я дал, и другие изображения вокруг нее меняют положение вот полный код проекта, если вам нужно проверить 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-имени изображения, но безуспешно.
Часть изображения я понятия не имею, что происходит, кажется, все правильно, насколько мне известно.

1 Ответов

Рейтинг:
2

Sinisa Hajnal

У вас есть это в вашем CSS

.container #images img:hover {
    cursor: pointer;
    border: 3px solid blue;



Если вы не хотите, чтобы изображения танцевали, не ставьте большую границу на парение. Или, если вы хотите иметь его, поставьте на каждое изображение прозрачную рамку одинаковой ширины.


Jimmy-IN

как установить невидимую границу.