所以今天我遇到了一些问题，所以我有一个社交媒体图标列表，我想要它，所以当它悬停时它将显示一个特定的div并逐渐淡出所有其他社交媒体图标...
请帮帮我
编辑：添加新代码，这就是我正在寻找的内容，所以当你悬停twitterIcon时，它会显示twitter div，但不会为每个项目使用fadein淡出...代码：
{{1}}
答案 0 :(得分：1)
根据您提供的信息和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="" href="#">Twitter</a>
</li>
<li data-label="Facebook">
<a data-icon="" href="#">Facebook</a>
</li>
<li data-label="YouTube">
<a data-icon="" href="#">YouTube</a>
</li>
<li data-label="Instagram">
<a data-icon="" href="#">Instagram</a>
</li>
<li data-label="Snapchat">
<a data-icon="" href="#">Snapchat</a>
</li>
<li data-label="Skype">
<a data-icon="" href="#">Skype</a>
</li>
<li data-label="E-Mail">
<a data-icon="" 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="" href="#">Twitter</a>
</li>
<li>
<a data-desc="facebook" data-icon="" href="#">Facebook</a>
</li>
<li>
<a data-desc="youtube" data-icon="" href="#">YouTube</a>
</li>
<li>
<a data-desc="instagram" data-icon="" href="#">Instagram</a>
</li>
<li>
<a data-desc="snapchat" data-icon="" href="#">Snapchat</a>
</li>
<li>
<a data-desc="skype" data-icon="" href="#">Skype</a>
</li>
<li>
<a data-desc="email" data-icon="" 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>
答案 1 :(得分：0)
您应该提供更多详细信息，例如您的html，例如您要显示的div。
但是在这里，这样的事情会起作用。我只在第一个图标上实现了它，这个图标是标识为twitterIcon
这里是jsfiddle：https://jsfiddle.net/Lxees8qw/10/
<div id="social">
Show something here
</div>
$(document).ready(function() {
$('div#social').hide();
var facebook = $('#facebookIcon');
var twitter = $('#twitterIcon');
var youtube = $('#youtubeIcon');
var instagram = $('#instagramIcon');
var snapchat = $('#snapchatIcon');
var skype = $('#skypeIcon');
var email = $('#emailIcon');
$('#twitterIcon').mouseover(function() {
$('#social').show();
facebook.hide();
youtube.hide();
instagram.hide();
snapchat.hide();
skype.hide();
email.hide();
});
$('#twitterIcon').mouseout(function() {
facebook.show();
youtube.show();
instagram.show();
snapchat.show();
skype.show();
email.show();
$('div#social').hide();
});
});
答案 2 :(得分：0)
虽然Halnex的想法确实有效，但defaultdict(<type 'set'>, {'id2': set([456, 123, 789]), 'id1': set([456, 123, 789])})
和.hide()会发生突然变化。 JQuery为您提供了.show()和.fadeIn()，使这些更改更加顺畅。
.fadeOut()答案 3 :(得分：0)
为所有<li></li>元素添加数据目标，其值为目标div的id。
将要显示的div放在另一个容器中。
<ul id="socialMediaIcons">
<li data-target="twitter" class="iconHover" id="twitterIcon"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li data-target="facebook" class="iconHover" id="facebookIcon"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li data-target="youtube" class="iconHover" id="youtubeIcon"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li data-target="instagram" class="iconHover" id="instagramIcon"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li data-target="snpchat" class="iconHover" id="snapchatIcon"><a href="#"><i class="fa fa-snapchat"></i></a></li>
<li data-target="skype" class="iconHover" id="skypeIcon"><a href="#"><i class="fa fa-skype"></i></a></li>
<li data-target="email" class="iconHover" id="emailIcon"><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
<div id="socialMediaDesc">
<div id="twitter"></div>
<div id="facebook"></div>
<div id="youtube"></div>
<div id="instagram"></div>
<div id="snpchat"></div>
<div id="skype"></div>
<div id="email"></div>
</div>
<script>
var socialMediaIcons = $('#socialMediaIcons');
var socialMediaDesc = $('#socialMediaDesc');
socialMediaIcons.on('mouseover', 'li.iconHover',function(){
var socialMediaIcon = $(this);
var target = socialMediaIcon.data('target');
socialMediaDesc.find('div[id]').hide();//Hide all children inside social Media description
socialMediaDesc.find('[id="' + target + '"]').show();//Show appropriate target
})
socialMediaIcons.on('mouseleave', 'li.iconHover', function(){
socialMediaDesc.find('div[id]').hide();//Hide all children on mouseleave
})
</script>
事件授权将是更好的方法。
答案 4 :(得分：0)
使用:after和:hover伪选择器和content CSS属性，在没有JS / jQ的情况下得到相同的结果
.iconHover {
font: 400 16px/1.5'Verdana';
border-bottom: 3px ridge grey;
width: 50px;
max-height: 25px;
background: rgba(51, 51, 51, .4);
transition: all 1s;
}
.iconHover:hover {
width: 150px;
border: 3px solid #f0f;
}
.iconHover:hover:after {
background: rgba(51, 51, 51, 1);
transition: all 1s;
content: attr(id);
color: #f0f;
float: right;
}
.iconHover:hover i,
.iconHover:hover a {
color: #f0f;
background: rgba(51, 51, 51, 1);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<ul>
<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>