Reputation: 39

Certain Div shows on hover

So today I am having a bit of a problem so I have a list of social media icons and I want it so when it hover it will show a certain div and fade all other ones for each social media icon separately...

Please help me

EDIT: Added new code and this is what I am looking for so when you hover twitterIcon it will show twitter div but without using fadein fadeout for each item...

Code :

<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>

Upvotes: 2

Answers (5)

Shaggy

Reputation: 6796

From the information and HTML you have provided, it seems to me like you're looking for something along the lines of the below Snippet. If that's not the case then please update your question to provide more clarity.

*{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>

Alternatively, to show and hide the elements as you have provided in the question, you'll need to use a little bit of 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>

Upvotes: 1

zer00ne

Reputation: 43940

Using :afterand :hover pseudo-selectors and content CSS property you get the same results without JS/jQ

SNIPPET

.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">&nbsp;</i></a>
  </li>
  <li class="iconHover" id="facebookIcon"><a href="#"><i class="fa fa-facebook">&nbsp;</i></a>
  </li>
  <li class="iconHover" id="youtubeIcon"><a href="#"><i class="fa fa-youtube-play">&nbsp;</i></a>
  </li>
  <li class="iconHover" id="instagramIcon"><a href="#"><i class="fa fa-instagram">&nbsp;</i></a>
  </li>
  <li class="iconHover" id="snapchatIcon"><a href="#"><i class="fa fa-snapchat">&nbsp;</i></a>
  </li>
  <li class="iconHover" id="skypeIcon"><a href="#"><i class="fa fa-skype">&nbsp;</i></a>
  </li>
  <li class="iconHover" id="emailIcon"><a href="#"><i class="fa fa-envelope">&nbsp;</i></a>
  </li>
</ul>

Upvotes: 0

Deepak Jose

Reputation: 76

Add data-target for all <li></li> elements with value as id of target div. Place the div to be shown on hover in another container.

<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>

Event delegation will be better approach.

Upvotes: 0

McLemore

Reputation: 625

While Halnex's idea does work, .hide() and .show() make an abrupt change. JQuery provides you with .fadeIn() and .fadeOut() to make these changes smoother.

$(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.fadeOut('slow');
    youtube.fadeOut('slow');
    instagram.fadeOut('slow');
    snapchat.fadeOut('slow');
    skype.fadeOut('slow');
    email.fadeOut('slow');
  });

  $('#twitterIcon').mouseout(function() {
    facebook.fadeIn('slow');
    youtube.fadeIn('slow');
    instagram.fadeIn('slow');
    snapchat.fadeIn('slow');
    skype.fadeIn('slow');
    email.fadeIn('slow');
  });
});

Upvotes: 0

Halnex

Reputation: 4526

You should provide more details, like your html for instance with the div you want to show.

But here, something like this will work. I've only implemented it on the first icon which is the twitter icon with id twitterIcon

Here's the 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();
  });
});

Upvotes: 0

Certain Div shows on hover

Answers (5)

SNIPPET

Related Questions