使用 css 显示和 JS 将图像替换为另一个图像

Question

我正在尝试在社交网络徽标上应用相同的效果：https://www.pierrejacobson.com/

与其使用 CSS 真棒，我想用图像来做，但它没有按预期工作。

关于CSS，没有必要把代码放在这里。我只有三个社交网络徽标display: none;.

你能帮帮我吗？

<div id="social_bar">
<div class="width_size">        
<img alt="image enveloppe" class="email" src="email.png" />
<p>[e-mail]</p>
<div id="network_logo">
<img alt="logo_facebook" id="fixed_facebook" src="facebook.png" />
<img alt="logo_youtube" id="fixed_youtube" src="youtube.png" />
<img alt="logo_instagram" id="fixed_instagram" src="instagram.png" />
<img alt="logo_facebook" id="facebook" src="facebook_blue.png" />
<img alt="logo_youtube"  id="youtube" src="youtube_blue.png" />
<img alt="logo_instagram"  id="instagram" src="instagram_blue.png" />
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
<!--social_bar-->
<div id="logo_bar">
<div class="width_size">
<img alt="logo" src="logo-pierre-jacobson2.png" />
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="30" value="RECHERCHER..." />
<img alt="search" src="search-solid.svg" />
</div>
</div>

.JS

const get_img = function(name){ return document.getElementById(name); };
const img_one = get_img("fixed_facebook");
const img_two = get_img("fixed_youtube");
const img_three = get_img("fixed_instagram");
const img_facebook = get_img("facebook");
const img_youtube = get_img("youtube");
const img_instagram = get_img("instagram");
img_one.addEventListener("mouseover", function (event) {
img_one.style.display = "none";
img_facebook.style.display = "inline";
});
img_two.addEventListener("mouseover", function (event) {
img_two.style.display = "none";
img_youtube.style.display = "inline";
});
img_three.addEventListener("mouseover", function (event) {
img_three.style.display = "none";
img_instagram.style.display = "inline";
});
img_one.addEventListener("mouseout", function (event) {
img_one.style.display = "inline";
img_facebook.style.display = "none";
});
img_two.addEventListener("mouseout", function (event) {
img_two.style.display = "inline";
img_youtube.style.display = "none";
});
img_three.addEventListener("mouseout", function (event) {
img_three.style.display = "inline";
img_instagram.style.display = "none";
});

Answer 1

从显示"none"到"inline"没有过渡。而是尝试使用"不透明度：0"和"不透明度：1"并设置"过渡：所有 0.2s 缓和";

Answer 2

显示属性：

在最初的问题中，您说要使用display属性来隐藏和显示图像，但是，您还表示希望屏幕从一个屏幕过渡到另一个屏幕。

通过恰如其分地命名的 CSStransition属性进行转换绝对是可能的

问题是显示属性无法进行动画处理。如果将元素配置为display: none;则会立即重新绘制页面并删除该元素。

这意味着您需要使用不同的属性，我们通常会使用opacity或visibility.以下是这三者之间的区别：

• display: none;
  • 立即折叠元素
  • 从视图中删除元素。
  • 不允许过渡。
• visibility: hidden;
  • 不折叠元素
    • 它占用的空间是空白的。
  • 从视图中删除元素
  • 允许过渡
    • 该元素仍然会弹出视线。
• opacity: 0;
  • 不折叠元素
    • 它占用的空间是空白的。
  • 从视图中删除元素
  • 允许过渡。
    • 元素将逐渐淡出，直到不可见。

下面是这些属性影响页面布局的不同方式的示例：

const context = document.querySelector("#examples");
const ele = context.querySelector.bind(context),
hide = section => section.classList.toggle("hide"),
onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));
opacity = ele(".opacity"),
opacity_button = ele("#oBtn"),

visibility = ele(".visibility"),
visibility_button = ele("#vBtn"),

display = ele(".display"),
display_button = ele("#dBtn"),

toggle_button = ele("#tBtn");

onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);
toggle_button
.addEventListener("click", function() {
hide(opacity); 
hide(visibility);
hide(display);
});

html,
body,
#examples {
width: 100%;
height: 100%;
box-sizing: content-box;
margin: 0px;
padding: 0px;
}
#examples section {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid black;
margin: 5px;
transition: all .5s ease-in-out;
}
#examples section.hide {
border-radius: 100px;
}
#examples section.opacity {
background-color: blue;
color: white;
}
#examples section.opacity.hide {
opacity: 0;
}
#examples section.visibility {
background-color: purple;
color: white;
}
#examples section.visibility.hide {
visibility: hidden;
}
#examples section.display {
display: block;
background-color: red;
color: white;
}
#examples section.display.hide {
color: black;
display: none;
}

<main id="examples">
<section class="opacity">opacity <button id="oBtn">hide</button></section>
<hr />
<section class="visibility">visibility <button id="vBtn">hide</button></section>
<hr />
<section class="display">display <button id="dBtn">hide</button></section>
<hr/>
<button id="tBtn">Toggle All</button>
</main>

注意：在上面实际上有两个属性在转换 -opacity、visibility或display-和border-radius。首先，您应该注意，在display示例中，根本看不到border-radius更改，其次，display示例是唯一折叠元素以使其不再占用空间的示例。

---

应用过渡：

通过将opacity: 0;与height: 0px; width: 0px;相结合，我们可以直观地从页面中删除元素，同时还可以消除它对其他元素的任何影响 - 这意味着它不会占用空间并且是可转换的。

但是，在您的特定情况下(想要将图像更改为不同的颜色(，所有这些都不是必需的。您可以将img标签换成div标签，然后应用 background-url 属性来获取图像(例如background-url: url("facebook.png");(和hover效果，可添加您正在寻找的任何background-color。

#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}

【注】您还可以将background-blend-mode调整为其他选项，以更改图像和颜色的组合方式。background-blend-mode: luminosity;会使颜色变浅background-blend-mode: color-dodge;会使颜色变暗并添加"减淡"效果。随意玩！

#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}

<div id="social_bar">
<div class="width_size">        
<p>[e-mail]</p>
<div id="network_logo">

<div alt="logo_facebook" id="facebook"></div>
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>