javascript - 悬停时显示某些 Div

标签 javascript jquery html css

所以今天我遇到了一点问题，所以我有一个社交媒体图标列表，我想要它，所以当它悬停时，它会显示某个 div 并分别淡化每个社交媒体图标的所有其他 div ...

请帮帮我

编辑:添加了新代码，这就是我正在寻找的，所以当您将鼠标悬停在 twitterIcon 上时，它将显示 twitter div，但不会为每个元素使用 fadein fadeout ...

代码:

<ul id="socialMediaIcons">
    <li class="iconHover" id="twitterIcon">
        <a href="#"><i class="fa fa-twitter"></i></a>
    </li>
    <li class="iconHover" id="facebookIcon">
        <a href="#"><i class="fa fa-facebook"></i></a>
    </li>
    <li class="iconHover" id="youtubeIcon">
        <a href="#"><i class="fa fa-youtube-play"></i></a>
    </li>
    <li class="iconHover" id="instagramIcon">
        <a href="#"><i class="fa fa-instagram"></i></a>
    </li>
    <li class="iconHover" id="snapchatIcon">
        <a href="#"><i class="fa fa-snapchat"></i></a>
    </li>
    <li class="iconHover" id="skypeIcon">
        <a href="#"><i class="fa fa-skype"></i></a>
    </li>
    <li class="iconHover" id="emailIcon">
        <a href="#"><i class="fa fa-envelope"></i></a>
    </li>
</ul>
<!-- Social Media Names -->
<div id="socialMediaDesc">
    <div id="twitter">t</div>
    <div id="facebook">f</div>
    <div id="youtube">y</div>
    <div id="instagram">i</div>
    <div id="snpchat">s</div>
    <div id="skype">sk</div>
    <div id="email">em</div>
</div>

最佳答案

根据您提供的信息和 HTML，在我看来您正在寻找与以下代码段类似的内容。如果不是这种情况，请更新您的问题以提供更清晰的信息。

*{box-sizing:border-box;font-family:Roboto,sans-serif;list-style:none;margin:0;padding:0;text-decoration:none;}
ul{
    font-size:0;
    padding:10px 0 10px 5px;
    pointer-events:none;
    text-align:center;
    white-space:nowrap;
}
li{
    border-radius:5px;
    font-size:24px;
    display:inline-block;
    margin-right:5px;
    pointer-events:initial;
    position:relative;
    transition:-webkit-filter .25s linear,filter .25s linear,opacity .25s linear;
    width:36px;
    z-indxe:1;
}
ul:hover>li{
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
    opacity:.54;
}
ul>li:hover{
    -webkit-filter:none;
    filter:none;
    opacity:1;
    z-index:2;
}
li::before{
    border-bottom:4px solid rgba(0,0,0,.84);
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    content:"";
    left:50%;
    opacity:0;
    position:absolute;
    transform:translatex(-50%);
    transition:opacity .25s linear;
    top:37px;
}
li::after{
    background:rgba(0,0,0,.84);
    border-radius:3px;
    content:attr(data-label);
    color:#fff;
    font-size:12px;
    left:50%;
    line-height:20px;
    opacity:0;
    padding:0 20px;
    pointer-events:none;
    position:absolute;
    transform:translatex(-50%);
    transition:opacity .25s linear;
    top:41px;
}
li:hover::before,li:hover::after{
    opacity:1;
    transition-delay:.125s;
}
a{
    color:#fff;
    display:block;
    line-height:36px;
    overflow:hidden;
    width:100%;
}
a::before{
    content:attr(data-icon);
    font-family:Material Design Icons;
    display:inline-block;
    text-shadow:2px 2px 5px rgba(0,0,0,.26);
    vertical-align:top;
    width:100%;
}
[data-label=Twitter]{background:#1da1f2;}
[data-label=Facebook]{background:#3b5998;}
[data-label=YouTube]{background:#cd201f;}
[data-label=Instagram]{background:#405de6;}
[data-label=Snapchat]{background:#fffc00;}
[data-label=Skype]{background:#00aff0;}
[data-label=E-Mail]{background:#ea4335;}
<link rel="stylesheet" type="text/css" href="https://cdn.materialdesignicons.com/1.6.50/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<ul>
    <li data-label="Twitter">
        <a data-icon="&#xf544;" href="#">Twitter</a>
    </li>
    <li data-label="Facebook">
        <a data-icon="&#xf20c;" href="#">Facebook</a>
    </li>
    <li data-label="YouTube">
        <a data-icon="&#xf5c3;" href="#">YouTube</a>
    </li>
    <li data-label="Instagram">
        <a data-icon="&#xf2fe;" href="#">Instagram</a>
    </li>
    <li data-label="Snapchat">
        <a data-icon="&#xf4b6;" href="#">Snapchat</a>
    </li>
    <li data-label="Skype">
        <a data-icon="&#xf4af;" href="#">Skype</a>
    </li>
    <li data-label="E-Mail">
        <a data-icon="&#xf1ee;" href="#">E-Mail</a>
    </li>
</ul>

或者，要显示和隐藏您在问题中提供的元素，您需要使用一些 JavaScript:

var icons=document.querySelector("ul"),desc;
icons.addEventListener("mouseover",function(evt){
    if(desc=evt.target.dataset.desc)
        if(desc=document.getElementById(desc))
            desc.classList.add("show");
},0);
icons.addEventListener("mouseout",function(evt){
    if(desc=evt.target.dataset.desc)
        if(desc=document.getElementById(desc))
            desc.classList.remove("show");
},0);
*{box-sizing:border-box;font-family:Roboto,sans-serif;list-style:none;margin:0;padding:0;text-decoration:none;}
ul{
    font-size:0;
    padding:10px 0 10px 5px;
    pointer-events:none;
    text-align:center;
    white-space:nowrap;
}
li{
    font-size:24px;
    display:inline-block;
    margin-right:5px;
    pointer-events:initial;
    position:relative;
    transition:-webkit-filter .25s linear,filter .25s linear,opacity .25s linear;
    width:36px;
    z-indxe:1;
}
ul:hover>li{
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
    opacity:.54;
}
ul>li:hover{
    -webkit-filter:none;
    filter:none;
    opacity:1;
    z-index:2;
}
li::after{
    border-bottom:6px solid rgba(0,0,0,.84);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    content:"";
    left:50%;
    opacity:0;
    position:absolute;
    transform:translatex(-50%);
    transition:opacity .25s linear;
    top:40px;
}
li:hover::after{
    opacity:1;
}
a{
    border-radius:5px;
    color:#fff;
    display:block;
    line-height:36px;
    overflow:hidden;
    width:100%;
}
a::before{
    content:attr(data-icon);
    font-family:Material Design Icons;
    display:inline-block;
    text-shadow:2px 2px 5px rgba(0,0,0,.26);
    vertical-align:top;
    width:100%;
}
section{
    font-size:14px;
    height:250px;
    left:50%;
    line-height:1.4em;
    position:absolute;
    top:56px;
    transform:translatex(-50%);
    width:282px;
}
section>div{
    background:#fff;
    border:1px solid #000;
    border-radius:5px;
    bottom:0;
    left:0;
    overflow:auto;
    padding:10px;
    position:absolute;
    right:0;
    top:0;
    transition:opacity .25s linear;
    z-index:2;
}
section>div:not(.show){
    opacity:0;
    z-index:1;
}
[data-desc=twitter]{background:#1da1f2;}
[data-desc=facebook]{background:#3b5998;}
[data-desc=youtube]{background:#cd201f;}
[data-desc=instagram]{background:#405de6;}
[data-desc=snapchat]{background:#fffc00;}
[data-desc=skype]{background:#00aff0;}
[data-desc=email]{background:#ea4335;}
<link rel="stylesheet" type="text/css" href="https://cdn.materialdesignicons.com/1.6.50/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<ul>
    <li>
        <a data-desc="twitter" data-icon="&#xf544;" href="#">Twitter</a>
    </li>
    <li>
        <a data-desc="facebook" data-icon="&#xf20c;" href="#">Facebook</a>
    </li>
    <li>
        <a data-desc="youtube" data-icon="&#xf5c3;" href="#">YouTube</a>
    </li>
    <li>
        <a data-desc="instagram" data-icon="&#xf2fe;" href="#">Instagram</a>
    </li>
    <li>
        <a data-desc="snapchat" data-icon="&#xf4b6;" href="#">Snapchat</a>
    </li>
    <li>
        <a data-desc="skype" data-icon="&#xf4af;" href="#">Skype</a>
    </li>
    <li>
        <a data-desc="email" data-icon="&#xf1ee;" href="#">E-Mail</a>
    </li>
</ul>
<section>
    <div id="twitter"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac dictum mi, a lacinia urna. Donec et massa in elit ornare malesuada. Sed sit amet turpis lacus. Praesent feugiat turpis dictum est dapibus scelerisque. Aliquam vehicula orci est, quis scelerisque erat feugiat at. Etiam porta, lorem id tristique tincidunt, mi arcu laoreet massa, quis facilisis libero mauris at velit. Ut volutpat nec nunc quis sollicitudin. Quisque eget nibh viverra, aliquam magna a, egestas quam. In pretium, quam finibus mollis suscipit, orci velit tincidunt arcu, quis ultricies massa risus hendrerit magna. Praesent quam mi, auctor non enim vel, malesuada aliquam elit.</p></div>
    <div id="facebook"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed posuere suscipit lectus et egestas. Morbi tristique velit id gravida dictum. Donec pulvinar velit justo, ut vehicula quam ultricies ac. Vestibulum et ligula nunc. Aenean fringilla magna ut odio blandit, sed sodales nisi tristique. Suspendisse vestibulum mi ullamcorper risus accumsan congue. Ut fermentum ex nisl, non vehicula leo suscipit eu. Aenean ante urna, mattis vitae lorem quis, placerat fringilla lectus. Curabitur dictum ex a elit scelerisque, eu consequat turpis convallis. Donec viverra orci quam, et sodales nulla hendrerit sit amet. Sed sollicitudin mi erat, vel rutrum ipsum ornare id.</p></div>
    <div id="youtube"><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam volutpat, nunc sit amet dictum vestibulum, neque elit congue tortor, ac eleifend purus risus id eros. In tristique, nisi at aliquam maximus, mauris quam ornare ipsum, vitae auctor nibh sem placerat est. Fusce tempor, nibh vitae scelerisque finibus, mi mauris aliquet nibh, eget pellentesque augue leo at lorem. Suspendisse potenti. Fusce efficitur egestas nibh, laoreet ultricies nisl luctus sit amet. Mauris id lectus hendrerit, malesuada est vitae, malesuada ex. Nam sit amet consequat mauris, quis fermentum libero. Ut bibendum nisl non porta feugiat. Vivamus dictum rhoncus tortor eget sodales. Quisque ultrices pretium sem ac iaculis. Maecenas ut dolor ipsum. Integer eget est erat.</p></div>
    <div id="instagram"><p>Mauris non felis ex. Cras tortor tellus, tristique vitae porta id, varius vel ipsum. Morbi dapibus vel sapien et aliquam. Fusce molestie nec libero sed bibendum. Curabitur hendrerit feugiat dictum. Nullam sit amet dolor hendrerit, sodales sapien eu, finibus elit. Vivamus a rutrum elit, in congue orci. Morbi tincidunt sollicitudin turpis, at aliquet justo malesuada eget. Sed tincidunt tellus at tincidunt luctus.</p></div>
    <div id="snapchat"><p>Quisque at massa et felis congue faucibus ac sed tellus. Nulla gravida quis sapien quis aliquam. Quisque aliquam eros orci, ut posuere elit tempus ac. Integer velit mauris, imperdiet vel risus nec, semper rutrum nisi. Cras ac magna nec dolor condimentum elementum. Quisque accumsan id leo vitae accumsan. Duis blandit augue enim, sed eleifend tortor viverra quis. Proin blandit suscipit molestie. Donec sed ultricies quam, quis congue ex. Maecenas condimentum velit finibus nunc aliquam, non condimentum lacus efficitur. Donec fermentum eu elit at pellentesque. Nunc dapibus quis libero auctor porttitor. Etiam lobortis pretium metus, ac iaculis purus. Phasellus sit amet auctor ante.</p></div>
    <div id="skype"><p>Nulla non libero ac dolor laoreet accumsan. Donec aliquet ligula vel libero elementum, sit amet pulvinar massa consectetur. Praesent venenatis massa sit amet dui convallis, nec ullamcorper sem rutrum. Maecenas iaculis diam non felis pulvinar tincidunt. Donec efficitur dolor sed mauris convallis interdum. Vestibulum quis commodo turpis. Nullam consequat risus eu mauris lobortis condimentum.</p></div>
    <div id="email"><p>Aenean nec ipsum a elit lacinia gravida sed vitae est. Aenean sapien justo, tincidunt sed luctus vel, tincidunt at ante. Nam fermentum, nibh ut blandit porttitor, odio eros bibendum metus, vel vehicula ante arcu quis ex. Vivamus bibendum hendrerit justo vel venenatis. Suspendisse vel risus vulputate urna accumsan tincidunt. Pellentesque auctor facilisis magna, eu volutpat ligula egestas et. Integer vel elit sagittis diam euismod imperdiet. Integer vestibulum metus quis enim cursus blandit eget ac ex. Fusce porta mi a nibh convallis, et tempus enim commodo. Curabitur in semper mauris. Ut suscipit mattis lorem, ornare eleifend erat porta vitae. Pellentesque pharetra nisi non tincidunt tristique. In hac habitasse platea dictumst. Etiam fringilla metus in libero accumsan fringilla.</p></div>
</section>

关于javascript - 悬停时显示某些 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38758261/

上一篇：javascript - 使用 HTML DOM 方法创建 HTML 文件并在 nodejs 中写入该 HTML 文件

下一篇：html - 避免在 django 模板 HTML 表中出现重复的 "if conditions"

相关文章：

javascript - 写出 base 7 word 的函数，如二进制计数器样式

javascript - 仅适用于手机/手机的粘性 div

html - 当没有在框中输入内容但光标仍在框中使用angular js时，如何使红色输入框出错？

html - 具有长标题的粘性标题会影响下一个粘性标题

javascript - 保护我的 Node.js 应用程序的 REST API？

javascript - NodeJS 如何处理内存？

jquery - 修改 JQuery 选择样式的 UL 以在没有 BootstrapJS 的情况下工作

javascript - 导航到另一个页面后保留 CSS 样式

html - 如何制作位置为:fixed occupy the entire parent width (and resize with it)?的div

javascript - 如何在单文件组件中扩展另一个 VueJS 组件？ (ES6 加载器)

©2024 IT工具网  联系我们