Okay. I can't really explain this so I just made a fiddle.
So click here
And the code looks something like this:
HTML:
Hover Me!<span class="tooltip">Hello, World!</span><br>
Hover This!<span class="tooltip">Hello, People!</span>
CSS:
a span {
display: none;
position: absolute;
color: #fff;
background: #000;
padding: 5px;
}
a {
position: relative;
}
a:hover span {
display:block;
text-align: center;
}
Also I got some more <a> css, but I don't think this is the problem..
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}
If you hover the first text, the box that appears won't cover the second text.
Basically the text is always the first and the box goes under it.
How do I fix this? It's very important or else my design won't work.
Thanks a lot.
Add a large z-index style, these determine the layer of the html object.
Hover Me!<span class="tooltip">Hello, World!</span><br>
Hover This!<span class="tooltip">Hello, People!</span>
Related
I've been trying to make the icon's background (from Material-UI) the same color as the rest of the list items when hovered over.
Not sure why the CSS does not apply to both the icon and text when the overall class (className= "dd-content-item") is being styled. Any help is appreciated thank you!
CSS:
/*This styling applies to each list element in the dropdown-content*/
.dd-content-item {
color: #1D3557;
padding: 12px 16px;
text-decoration: none;
display: block;
list-style-type: none;
cursor: pointer;
justify-content: center;
background-color: none;
}
/*Hovering over a list element in the dropdown menu colors it darkly*/
.delete-icon, .archive-icon{
position: relative;
top: 6px;
}
.favorite-icon, .tag-icon {
position: relative;
top: 7px;
}
.dd-content-item:hover {
background-color: #D3EDEE;
}
/*When you hover over the dropdown-content, it is displayed as a block*/
.dd-wrapper:hover .dd-content {
display: block;
}
Code showing hierarchy in html
Image of hover action
What kind of icon are you using? Is it an image or SVG or what? Chances are your image doesn't have a transparent background.
Otherwise, something like this might help;
.dd-content-item:hover,
.dd-content-item:hover .delete-icon,
.dd-content-item:hover .archive-icon,
.dd-content-item:hover .favorite-icon,
.dd-content-item:hover .tag-icon {
background-color: #D3EDEE;
}
Hard to diagnose or say really as I can't see how those images work or what type of object they are.
This is my first time asking anything but I'm stuck and I hope i explain clearly what I'm trying.
I have a nav menu that if a link is clicked it (that choice) moves to the far left spot of the menu. Whatever menu option is clicked and in the far left spot i just want the font larger and the color Orange. The next option that clicked needs to go in the left spot and have its font larger and color Orange while the other options go back to small and white.
I'd also like the remaining menu options to stay in the same order that they start in if they are not the choice in that far left spot. I want my sub-menu's to eventually look and work the same way.
Here is my code:
HTML:
<div>
<ul id="main-top">
<li id="blank"><a href="#" ></a></li>
<li>Projects</li>
<li>Services</li>
<li>Contact</li>
<li>Sign-in</li>
</ul>
</div>
CSS:
body {
background: black;
color: white;
}
#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}
#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}
a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}
a:hover{
color: #FF4500;
}
jQuery:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$('#blank').hide();
});
demo: http://jsfiddle.net/CLTZs/
I've tried just adding a function to alter the css of the first-child, but it targets that blank spot and not what goes into it.
You could addClass within your function
DEMO http://jsfiddle.net/CLTZs/1/
jQuery
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.addClass('firstOpt');
$('#blank').hide();
});
CSS
#main-top li.firstOpt a {
color: #FF4500;
font-size: 25px;
font-weight: bold;
}
Just so i don't leave this question out there not fully answered - I was able to get the desired effect by using your suggestion #Vector and adding a little bit to get the li's back to original look:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.toggleClass('active');
$this.siblings().removeClass("active");
$('#blank').hide();
});
and adding the class "active" to my CSS:
.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}
Since i have other jquery toggles going on with those menu options, I was able to insert that jquery right into my existing function and it work fine. For some reason it throws off my spacing on the rest of the list, but I'll have to figure that out in my css files.
fiddle: http://jsfiddle.net/CLTZs/2/
I'm a newbie; need some help! I created a left-aligned navigation menu with a slide-out submenu. I'm happy with everything except for the sub-menu's height. How can I make the entire slide-out menu (the opaque one) go to 100% height of the entire screen? Want it to look like this: http://perezweddings.com/blog/
Here's my jsfiddle: http://jsfiddle.net/alh3168/hE6Sv/10/
Do I need to change something in here?:
div.menu ul.second li a {
width: 150px;
bottom: auto;
min-height: 100%;
background-color: #B2CC7F;
color: #00293E;
text-decoration: none;
display: block;
padding: 7px 10px 0 0;
text-align: left;
cursor: pointer;
cursor: hand;
background: #000;
background-color:rgba(0,180,180,0.3);
padding-left:20px;
font-family: Neou-Bold;
src: url('Neou-Bold.otf');
font-size:10px;
letter-spacing:1.6px ;
}
Right now the color is on the sub-menu anchors. We need to move that to the parent ul.second element, and then add CSS to make that element fixed and span from the top to the bottom.
div.menu ul.second {
background-color:rgba(0,180,180,0.3);
top:0;
position: fixed;
bottom:0;
}
Once that has been done, we need to update the anchor style to set the background color of sub-menu items to transparent by default since the background color is coming from the parent element.
div.menu ul.second li a {
background-color:transparent;
}
You'll probably want to add some padding to the div.menu ul.second element as well and there are some other things you may want to adjust, but you can quickly add this CSS to the bottom of your fiddle to see it working.
CSS
#myMenu ul li {
display: inline;
}
#myMenu ul li a {
background-color:#333333;
text-transform: uppercase;
font-weight: bold;
font-family:"Open Sans", Arial, sans-serif;
font-size:12px;
text-decoration: none;
padding: 1em 2em;
color: #000000;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
}
#myMenu ul li a:hover {
color: #fff;
background-color: #999999;
}
.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
HTML
<div align="right" id="myMenu">
<ul>
<li>Structure</li>
<li id="style">Style</li>
<li>Details</li>
</ul>
JavaScript
$(function () {
$("li:first-child").addClass("selection");
$('li').click(function () {
$('#myMenu li').removeClass('selection');
$(this).addClass('selection');
});
});
I want to add black colour to selected items background, but the above code is not working.
If I remove background-color:#333333 from #myMenu ul li a it works.
There are a couple of issues here.
You have tied your click handler to li so the context will be the li element
Your background color is set on the anchor: #myMenu ul li a initially
Assuming you want .selection to apply to the anchor tag, it has less specificity than the class for the anchor.
Change your code and CSS to:
CSS:
#myMenu ul li a.selection {
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
}
Code:
$(function () {
$("li:first-child").addClass("selection");
// Or move your handler to the anchor rather than the list item
$('li').click(function () {
$('#myMenu li a').removeClass('selection');
$(this).find('a').addClass('selection');
});
});
Demo Fiddle
You are adding the background color via CSS to the <a> element. You are targeting the <li> element with your jQuery. For all you know, the jQuery could be working properly, but you can't see it because the <a> element has a background color.
Try changing the jQuery to target the <a> element instead. Be sure to return false or use preventDefault() when targeting the <a> element.
Also, as a side note, unless you have something else going on which I don't know about, it would be more efficient just hard code the selection class to the first element instead of targeting it with jQuery. Just a tip.
Also to add to Chris's answer...the css for #myMenu ul li a will always outweigh the .selection because it is has more specificity. You will need to add !important to any styles in .selection if you want them to override the styles in #myMenu ul li a
Generally although jQuery does auto selection automatically I personally like to handle it myself, just because then I know my code is "selecting" what I want.
So Like this:
$(function () {
$("li:first-child").addClass("selection");
$('li').each(function(){ //loop all li elements
$(this).click(function () {
$('#myMenu li.selection').removeClass('selection'); //select the li
// with the selection class
$(this).addClass('selection');
});
});
});
But basically an issue I see with how you did it is there is no margin on you anchor, or padding on your li, witch could make the changes to the li invisible.
Used with the following it should tell you if this works
.selection{
background-color: #000000;
border-bottom:10px solid #000000;
border-top:9px solid #000000;
padding:5px; //change to suit your needs
}
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}