I'm creating a Inbox in which there will me a asp menu on the side and Inbox on the center. I need to change the font color to red and make it bold when I see a new row from the database. I have used adding on the menu item.
If Not Hovered it looks like this.
If Hovered It Has to look like this.
But the problem is that when I hover on the text it looks like the image shown above, but if I hover slightly on the top or bottom of the menuItenm (Inside the Menu Item but not on Text), Then This looks like this.
CSS used For Menu Item.
.Menu ul li a {
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;}
.Menu ul li a:hover{
background-image: none;
color: white;
background: #424242;}
Here is the code I used to change The color and set the font to bold From server side.
Menu1.Items[0].Text = "<div class='inboxno' >" + "Inbox (" + (i + 1) + ")" + "</div>";
Here is the CSS class of inbox.
.inboxno{
background-image: none;
color: Red;
font-weight:bold;}
.inboxno:hover{
background-image: none;
color: white;
background: #424242;
font-weight:bold;}
I think I understand the problem. It is, that a <DIV> is created around the inbox Text inside the Menu Item and It has the Css inboxno. But the Menu Item has padding and When I place mouse on the padding Area then the inboxno:hover class is not being applied to the Div.
I think one of the solutions to this problem is, if I could access the .Menu ul li a class from .inboxno:hover class I will remove the Padding Property and Set the Same padding property in the .inboxno:hover class.
But I don't know how to access the .Menu ul li a class from .inboxno:hover class.
Can you Help me??
Not sure if you're just asking about the hover or not but try doing
.Menu ul li:hover a {
background-image: none;
color: white;
background: #424242;
}
Related
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
I'm trying to style my wordpress sub-menu with CSS to show only when a user hovers the "Color" menu item but I haven't succeed so I need some help please.
Here's how my menu looks like at this state:
The sub-menu shows all the time and there is a weird space after the "Color" menu item. Also, the sub-menu items are displayed one after another and not one below other like a drop-down menu should be.
Could you please help me out?
I'm aware that there are some similar questions to this one but they were of no help.
EDIT: added current CSS menu code that I have in my style.css
nav.main { float: left; }
nav.main li { float: left; margin-right: 11px; }
nav.main li.last-child { margin-right: 0; }
nav.main li a {
color: #7A0018;
display: block;
font-size: 13px;
padding: 50px 7px 22px 7px;
text-decoration: none;
}
nav.main li a:hover { background: #fbf6dc; }
nav.main li.current-menu-item a { background: #fbf6dc; }
where is css for your child list items ? you haven't use display property for those sub-menu which should be done none first then only on hovering them you have to change display property 'block'.
You have given margin-right property 11px; where as ul on default also occupies some margin.
Can you also provide your html frame (code)?
Is there a way to change the css property for example of a box when an element (inside the ) is hover?
for example if I have:
<table>
<tr><td><a>.....</td></tr>
</table>
I want to change the property of the container td when the link a has the mouse over. Is it possible?
Sorry, I have not explained well.
I have a , not a table...it was only an example....
I have
<ul>
<li><a>.....
in my css I have:
#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
Instead of
#navigation li a:hover {
try
#navigation li:hover a {
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:
li:hover a {
color: #d2d2d2;
}
This basically says "when the li is hovered, the link inside it should change to these styles."
Alternatively, you can add padding to the link (ex - padding: 5px), making its reaction field larger. So:
li a {
display: block; /* Required to make it honor padding. */
padding: 10px;
}
li a:hover {
color: #d2d2d2;
}
As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.
You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:
table td:hover {
background-color: red;
}
You could add display: block to the anchor element which would make the anchor fill the li... Depending on indentation on the ul etc etc..
li a { display: block; }
I'm having an issue on my site http://noahsdad.com; if you look at the widget I installed at the very bottom, you can't see the links unless you hover over them. This doesn't just happen with this widget, almost any I put in have a 'haze' over them, if that makes sense.
I'm wondering if someone could help me figure out what's going on, and how to correct it.
Thanks.
The links are visible, they are just set to a light grey colour. You have these rules defined in your default.css file:
a:link, a:visited {
color: #EEEEEE;
}
a:hover {
color: #999999;
}
You could change the value of the standard link colour, or you create a new rule with a higher specitivity, so that only links in that widget are affected.
#dsq-combo-widget a {
color: #999;
}
Update
You haven't specified the color for your new style:
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #999; <-- Add this
}
Only because of color you can't see it but it's visible. You have a predefined color (#EEE) for all of your "a:link, a:visited" at "http://yourdomain.com/wp-content/themes/ProPhoto_10/style.css" at line 3 and all links are inheriting that color so if you want to change the color for your widgets then add another color like
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #333; /*or whatever you want*/
}
It's at line 345 in the same file.
I'm creating a horizontal menu in my website and everything is OK but one thing. I have a link in each <li> and the color is set to white and li has no background, but in hover I want to set li background to white and links text color to black. The problem is that the width of <a> tags is not the same as <li> and when the mouse is over the part that is in <li> but not in <a> both become white.Anchor links can not have width property as far as I know, and I try different type of tricks but no success.Any idea?
#primary-menu ul li {
list-style-type: none;
float: left;
background-image: url('menu-sep.png');
background-repeat: no-repeat;
background-position: right;
}
#primary-menu li a:hover {
color: black;
}
#primary-menu li:hover {
background-color: white;
color: black;
}
#primary-menu li a {
color: white;
text-decoration: none;
padding-right: 8px;
margin-right: 8px;
width: 100%;
height: 23px;
}
`
Check your <li> styling. They probably have padding. Remove it and the anchors should occupy the entire available space. Also, change the margin on the <a> tag to padding. Padding counts as part of the tag (ie, hovering over the padding makes it trigger the :hover pseudoselector), while margins do not.
as you have written above that should be worked but you are saying that is not working then try by making class refered to only text like.
.liText
{
color:white;
}
.liText:hover
{
color:black;
}
hope this will work.
use class attribute with your tag.
like
<a class="liText"> // for single class
if you want to use two or more classes for one tag then use another class after giving space as i mentioned below.
<a class="firstClass SecClass ThirdClass">