使用css显示和JS替换图像

问题描述 投票:0回答:1

我正在尝试对社交网络徽标应用相同的效果: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>[email protected]</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";
});
javascript html css dom display
1个回答
0
投票

从显示“无”到“内联”没有过渡。而是尝试使用“ opacity:0”和“ opacity:1”并设置“ transition:全部为0.2s缓解”;]


0
投票

Display属性:

在您最初的问题中,您说您想使用display属性隐藏和显示图像,但是],您还声明希望将屏幕transition从一个到另一个。

绝对可以通过适当命名的CSS transition属性进行转换

问题是display

属性无法设置动画。如果将元素配置为display: none;,则页面将立即重新绘制,并删除了该元素。

这意味着您需要使用其他属性,我们通常会使用opacityvisibility。这是这三个之间的区别:

  • display: none;
    • 立即折叠元素
    • 从视图中删除元素。
    • 不允许过渡。
  • visibility: hidden;
    • 不折叠元素
      • 它占用的空间为空白。
  • 从视图中删除元素
  • 允许转换
    • 该元素仍会pop
    • 不可见。
  • 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>

    注意:

    上面实际上有两个属性转换-opacityvisibilitydisplay- border-radius。您应该首先注意到在display示例中如何[[at all]]看不到border-radius变化,其次,display示例是唯一使元素折叠以使其不再占用的示例空间。
    正在应用过渡:

    通过将opacity: 0;height: 0px; width: 0px;结合起来,我们可以从页面上直观地删除该元素,同时还消除了它对其他元素的任何影响-表示该元素

    不会占用空间

    可转换] >。但是,在您的特定情况下(想要将图像更改为其他颜色),所有这些都是不必要的。您可以将img标签换成div标签,然后应用background-url属性获取图像(ae 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调整为其他选项,以更改图像和颜色的组合方式。 a.e. 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>[email protected]</p>
            <div id="network_logo">
         
                <div alt="logo_facebook" id="facebook"></div>
            </div>
    
            <!--network_logo-->
        </div>
    
        <!--width_size-->
    </div>
    © www.soinside.com 2019 - 2024. All rights reserved.