选中时网格中的图像会闪烁！ [英] Images in grid are flickering when selected!
问题描述
我已经完成了一个Image项目，我在其中选择了一个图像并突出显示所选图像，并在列表中显示所选图像的alt名称（这样工作正常，直到我添加更多信息链接到图像）
现在使用
position：relative 添加更多信息链接后和
position：absolute JS没有检索图像的名称，所选的图像边框是方式比我给出的更大，周围的其他图像改变位置如果你需要检查 JSFiddle
以下是我出错的代码片段
HTML
< div class = 容器 id = imagezone >
< ul id = list >
< li > Image1 < / li >
< li > Image2 < / li < span class =code-keyword>>
< li > Image3 < / li < span class =code-keyword>>
< li > Image4 < / li < span class =code-keyword>>
< li > Image5 < / li < span class =code-keyword>>
< li > Image6 < / li >
< li > Image7 < / li >
< li > Image8 < / li >
< li > Image9 < / li >
< / ul >
< div id = images >
< div < span class =code-attribute> class = content > < img id = adj src = < span class =code-keyword> images / Chrysanthemum.jpg al t = Chrysanthemum width = 300 height = 200 > < a href = ＃ > 更多信息< / a > < < span class =code-leadattribute> span > 这是关于图像的一些描述。< / span > < / div >
< div class = content > < img id = adj src = images / desert.jpg alt = desert width = 300 height = 200 > < a < span class =code-attribute> href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< / span > < / div >
< div class = content > < img id = adj src = images / Hydrangeas.jpg alt = 绣球花 width < span class =code-keyword> = 300 高度 = 200 > < a href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< / span > < / div >
< < span class =code-leadattribute> div class = content > < img id = adj src = images / jellyfish.jpg alt = 水母 width = 300 height = 200 > < a href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< / span > < / div >
< div class = content > < img id = adj src = images / koala.jpg alt = 考拉 width = 300 height = 200 > < a href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< / span > < / div >
< div < span class =code-attribute> class = content > < img id = adj src = images / lighthouse.jpg alt = lighthouse width = 300 height = 200 > < a href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< span class =code-keyword>< / span & gt; < / div >
< div class = content > < img id = adj src = images / penguins.jpg alt = penguins width = 300 height = 200 > < a href = ＃ > 更多信息< ; / a > < span > 这是关于图像的一些描述。< / span > < / div >
< div < span class =code-attribute> class = content > < img id = adj src = < span class =code-keyword> images / tulips.jpg alt = 郁金香 width = 300 height = 200 > < a href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< / span > < / div >
< div class = content > < img id = adj src = images / dbz .jpg alt = dbz width = 300 高度 = 200 > < a href = ＃ > 更多信息< / a > < span > 这是关于图像的一些描述。< / span > < / div >
< < span class =code-leadattribute> / div >
< / div >
CSS < pre lang =CSS>＃ images div {
位置 ： relative;
float ： left;
}
＃< span class =code-leadattribute> images img {
position < span class =code-keyword>： relative;
}
＃图像 a {
right ： 10px;
position ： 绝对;
bottom ： 10px;
颜色 ： #ffffff;
font-family ： 草书;
}
＃ images a：hover + span ，
span：hover {
display < span class =code-keyword>： block;
}
span {
top ： 10px;
position ： 绝对;
显示 ： 无;
left ： 10px;
padding ： 10px;
height ： calc（100％ - 40px）;
width ： <跨越式s =code-keyword> calc（100％ - 40px）;
background ： rgba（255,255,255,0.7）;
color ： black;
溢出 ： 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名称，但没有运气。
图片部分我不知道发生了什么事情似乎一切都是正确的我的知识。
你的CSS中有这个
。container #images img：hover {
游标：指针;
边框：3px纯蓝色;
如果你不要让图像跳舞，不要在悬停时放置大边框。或者如果你想拥有它，请在每个图像上放置相同宽度的透明边框。
I have done a Image project where I select a Image and it highlights the selected one and displays the 'alt' name of the selected image in the list(which was working fine till i add 'more info' link to image)
Now after adding the "more info" link using
position:relativeand
position:absolute The JS is not retrieving the name of the image and the selected image border is way more bigger than I've given and other images around it changes position here is the full code of the project if u need to check JSFiddle
Below are the codes snippets from where i went wrong
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);
}
What I have tried:
I've tried using document.getElementByClassName to retrieve the image alt name, but no luck.
Image part I've no idea whats happening it seems everything is correct upto my knowledge.
You have this in your CSS
.container #images img:hover { cursor: pointer; border: 3px solid blue;
If you don't want images to dance, don't put big border on the hover. Or if you want to have it, put on each image transparent border of the same width.
这篇关于选中时网格中的图像会闪烁！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
