i want that when i move my mouse on menu. it will change background colour as well as it will change text colour.
but my CSS only change background colour, it will not change text colour.
need help please.
a:hover
{
color: #231f20; //for text new colour (not worked)
background-color: #ffffff; //for background new colour (it worked)
}
I think I understand what you mean, the only reason why I don't think it worked was the way you tried to comment out the code, you were using // instead of /*.
Here's what I replaced it with:
a:hover
{
color: #231f20; /*for text new colour (not worked)*/
background-color: #088a68; /*for background new colour (it worked)*/
}
Small Example
<br>
Big Example
Live example: https://jsfiddle.net/yn16bxsv/
Hope this helped
Related
In CSS I changed the border color and the text color of the bootstrap button-outline-danger and I am trying to change the color of the shadow, or what it is called when you click on it, and outline-button changes color and I don't know how to do it.
My CSS, which works
#delete {
color: #95ff0b;
border-color: #51dfe1;
background-image: none;
}
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
I'm trying to remove the white-background of wordpress Article (page), NOT the body background, the element's background. I would that the article text has no white background, but only the body background.
I've tryed so many "external css" but no one worked for me.
article.post-1 { //just an example, I've tryed many other elements
background-color: transparent;
}
https://i.imgur.com/gJtqjpP.jpg You can see the white background behind the TEXT, i would remove that white and see the TEXT directly on the background image. It's in the homepage.
I achieved that by adding a !important after my css code:
element {
background-color: transparent !important;
}
First of all you should inspect the code of the page to find out the class where the background is applied, then you can set background: transparent (and not background-color, because it only works with color values).
I used a free theme from someone : Olsen Light. And I want to add an archive to my sidebar. When the archive is displayed as just text, it is in black. When I change the widget option to dropdown, it's white...
I've been looking in the style CSS, nothing has color:white of #fff in it, only background-colors are white.
Is there a way I can use an overwriting style class that I put in the 'additional CSS' so that it appears black? I've tried widget-9 { color: black !important; but it doesn't work. Maybe anyone can click inspect element to see the css and html and tell me how I can fix this please?
Here is the example on my blog : www.oihanevalbuenaredondo.be
I've put both archive styles at the bottom of my sidebar
For some reason, the elements inside the aside for your archives are being wrapped in <b> elements set to color: white;.
Add this code, and you should be good:
.widget_archive * {
color: #111 !important;
}
I put #111 but you can use whatever color.
By inspecting, I've found out it has 3 <b style="color: white"> inside each other inlined, but none of them has !important, so you may override it in a custom style. I see you have a style.css. Try adding this:
aside.widget-9 h3 b {
color: black !important; /* your color */
}
I've created this hexagonal navigation to fit within a website.
http://www.flickr.com/photos/14577801#N00/11202239254/
I'm wanting to know what would be the best way to go about creating the structure of the navigation in html and css. Where the links are within the white hexagons, I would like hovering over these links to change the white background to a colour. I've tried to do this with using background images, but haven't quite got there. The surrounding coloured hexagons I've been using as a whole background image for the navigation.
I found this on the web: http://jtauber.github.io/articles/css-hexagon.html , which I think could be great to use, but I thought there must be a way to use background images.
Thanks, Tim.
The color of an element (in this case, a hexagon) can be changed on hover with css. If we add this to the style properties in your css-hexagon tutorial:
.hex:hover {
background-color: blue;
}
.hex:hover:before {
border-bottom: 30px solid blue;
}
.hex:hover:after {
border-top: 30px solid blue;
}
The hexagon will change color when the cursor hovers over it, which you can see in this jsfiddle.
You can find good documentation of the CSS :hover pseudo-class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover