How do I disable all of them from opening when I hover with the mouse?
I just want the icon I'm on to open.
Can someone tell me the best approach for this ?
Thank you.
before hover
after hover
codepen.io
repl.it view
repl.it source files
When I come on it with the mouse, I just want that column to slide.
There are all the codes in the codepen.io, but the icons are not
visible.
.top-social-bg {
background-color: rgba(0, 0, 0, 60%);
text-align: center;
position: absolute;
right: 0px;
}
<div class="top-social-bg" >
<ul id="top-social">
<li><span class="ts-icon"><i class="icon-call" style="color:white"></i></span><span class="ts-text">telephone</span></li>
<li><span class="ts-icon"><i class="icon-envelope-alt" style="color:white"></i></span><span class="ts-text">email</span></li>
<li><span class="ts-icon"><i class="icon-facebook" style="color:white"></i></span><span class="ts-text">facebook</span></li>
<li><span class="ts-icon"><i class="icon-instagram" style="color:white"></i></span><span class="ts-text">instagram</span></li>
</ul>
</div>
It's hard to give you the correct direction, without seeing how your css is defined for icons I'm assuming you have a .top-social-bg:hover (...followed by maybe li a or i or i:before?)...`
You place the hover where you want hover detected, and then change the css for the child element. You need to specify a style that is specific to the icon.
For example
.top-social-bg li:hover i { display:block;}
or perhaps it's
.top-social-bg li:hover i:before { display:block;}
And then define a class for how it should appear when not hovered.
.top-social-bg li i { display:none;}
or perhaps it's
.top-social-bg li i:before { display:none;}
Related
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
The title probably doesn't actually describe the issue properly. I want to create a menu for my website that is a vertical menu on the left side, and when you hover over an option with sub-options those sub-options pop out to the side (doesn't really matter at the moment). The issue I'm having is that when they pop out they push down all the other options, and I get this navigation bar that doesn't look good at all. If someone could help me fix this so I don't shove everything else out of the way even though they aren't overlapping, that would be appreciated.
The HTML I use.
<ul id="nav">
<li>Work</li>
<li>Imaging
<ul>
<li>Photoshop
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Illustrator</li>
</ul>
</li>
<li>Home</li>
The CSS I use.
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
position: relative;
float: left;
}
Thanks in advance if someone can help me with this.
that is because your document is having all the elements in a line and will always show them one after the other!
So my advice for you would be to just use
position: absolute;
This way you can align the elements over the document without interefering the current document style and element alignment!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I would position the ul inside your li absolute.
position:absolute;
When you do this the element will hover above the li-parent. When you try a little with positive and negative margin you will be able to put the hover element next to it parent.
It will be something like this:
#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}
Hi I have some HTML and CSS that creates a <ul> on my screen. The items are links to other pages on the site. I want the items in the list to be black normally, light grey if hovered over, and light grey if it's the screen the user is on.
Here is the HTML for the <ul> on the home screen. On the home screen, the list item "Home" should be light grey, while all the others should be black unless hovered over.
<div id="navmenu">
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li>Research</li>
<li>CV</li>
<li>Links</li>
</ul>
</div>
My CSS sheet is:
#navmenu {
margin: auto;
}
#navmenu ul {
text-align:center;
}
#navmenu ul li {
display:inline;
padding-left:25px;
padding-right:25px;
}
#navmenu ul li a {
color:#000000;
}
#navmenu ul li a:hover {
color:#F2F2F2;
}
#navmenu ul li a:selected {
color:#F2F2F2;
}
The links are black, which is good. They also turn light grey when I hover over them, which is great. But whenever I select one of the items to go to the page, I can't get the link that I'm currently on to be light grey. This also applies to the home page - whenever I go to the first page, the "Home" item is in black.
Can anyone see what I'm doing wrong here? Any help is appreciated.
Do you mean to do this:
#navmenu ul li a.selected {
color:#F2F2F2;
}
See: http://jsfiddle.net/audetwebdesign/nSgDf/
There is currently no :selected pseudo-class in CSS2 or CSS3.
Apply the .selected class to denote the current page that the user is visiting.
Reference: http://www.w3.org/TR/css3-selectors/#pseudo-classes
I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
I've got a simple html-list which contains elements like this:
<li>
some link
<span class="sc-track-duration">24.27</span>
</li>
On the hover-state I change the text-color to white:
li:hover {
background-color: #d21600;
color: #fff;
}
The span's text-color changes but the link's color doesn't.
How can I solve this without using JS?
You need to style the anchor as well, for example:
li:hover, li:hover a {
background-color: #d21600;
color: #fff;
}
Your anchor has a more specific style defined elsewhere and that's winning, even over your li:hover rule, so you need to add a more specific li:hover a to get it styled as well.
You also need to add the style to the a element within the li, you can do that by simply do this:
li:hover, li:hover a {
background-color: #d21600;
color: #fff;
}
You know the exact code you posted is wrong. Missing "> there.
<li>
link text
<span class="sc-track-duration">24.27</span>
</li>