On mouseover a div the background color is changing but not the div text color.
Can you please let me know if it is possible?
It's just a plain css and html.
my css code is
.divTable-row:hover{
background:#65A3B8;
color:#ffffff;
}
Try to force the style, with !important , like this:
.divTable-row:hover{
background:#65A3B8;
color:#ffffff !important;
}
this could fixed the issue when overlapping with another css rule.
Example fiddle with an overlapping problem: http://jsfiddle.net/dSGf7/2/
Fixed example using !important : http://jsfiddle.net/dSGf7/3/
Related
Take a look at the image. First one is hover. How to make such gradient hover effects with the gradient background?
Here's the HTML code- https://github.com/itsumrat/olivia/blob/master/index.html#L127
Here's SCSS code-
https://github.com/itsumrat/olivia/blob/master/assets/src/scss/components/_feature.scss
This is a simple Background Change on Hover:
#yourbutton:hover {
background: linear-gradient: ....;
}
Maybe there's a div in the button with a small white border around. You could Effect the color of that div to have the same result as in the image.
I've set background-image property in parent element as:
Full screenshot
It works fine.
Inside parent element what has id set as "content" I have a child element
with id "comments".
Full screenshot
Whatever I have tried it doesn't take any effect. I tried to set it to none or even to change to another image. Nothing helps. I want to remove background image for child element or to change it.
Please help, I can't find where I did a foolish thing this time(
If I understand correctly , if you want the child element not to have a background you can add
#comment{
background: rgba(255, 255, 255, 0);
}
and try to remove any other background properties for this element that may be overriding
If you need a different background for the child element then add the follwing
#comment{
background:url(../path/to/image);
background-position:center;
background-size:cover
}
if you want to maintain the image aspect ratio then change cover to contain but this may not fill the whole #comments div in order to respect the ratio
If you need to add a pattern background then use background-repeat:repeat and remove cover and center
I don't think it's possible to do what you want with the current way that your HTML is structured. The #comments div is a child element of the #content div, which has a background set. Even if you give #comments no background, it's still going to show the background of the parent element. Perhaps you could just make the background of #comments white to overlay on top of the #content div? Or remove #comments from the parent element.
Example CSS:
#comments {
background: #FFFFFF;
}
Either move the comments box out of the content element, so content's background does not cover comments, or give the comments element its own background (color or image).
From your screenshots it seems everything is fine. Technically, all DOM elements are transparent by default, and it has no background, it is transparent. So your comments are transparent and have no background. So by setting it to none you are not chanding anything, because its background is none.
I have div box which is inside anchor tag.
Want to create some effect on the text inside div.
I coded but it does not show effect.
I wanted that when user take mouse over url in then background should change to Yellow color:
.fragment h4: hover {
background-color:yellow;
}
Also the button here does not give on hover effect. Can someone let me know which effect is there in CodePan.com
I want to keep my color and trying to create gradient and hover effect as it is on Codepan.com buttons
http://www.codepen.io/karimkhan/pen/riklv
UPDaTE
I want to keep box single clickable. And want to change url when it is mouse overed.
There's a typo in your code, h4:hover MUST go together:
.fragment h4:hover {
background-color:yellow;
}
Please note how I removed the space between h4: and hover
The problem you're having with your button is that your CSS is incorrect, you forgot to add a . before the name of the class, i.e : .button. I just updated the jsfiddle to add this as well.
Here's a working jsfiddle.
Try:
.fragment:hover h4 {
background-color: yellow;
}
How can I prevent a child div :hover event to be overridden by its parent :hover event?
This is how I create the div element:
HTML
<script type="text/javascript">
var counterd = document.createElement("div");
counterd.id='counterdiv';
counterd.innerHTML = "(<?php echo $woocommerce->cart->cart_contents_count ?>)";
document.getElementById('menu-item-130').appendChild(counterd);
document.getElementById("counterdiv").setAttribute('onclick', 'location.href = "/varukorg"');
</script>
The CSS to change style is:
#menu-item-130:hover #counterdiv, #menu-item-130.current_page_item #counterdiv {
color: black;
}
I also have some CSS rules to style #menu-item-130 on :hover. The problem occurs when the mouse goes over #counterdiv, it changes the #counterdiv text to black. I don't want the #counterdiv element to trigger the parent's event when it is hovered. The hover CSS for the #menu-item is the following:
#menu-item-130 a:hover, #menu-item-130.current_page_item a {
background: url(../images/cart-59-24black.png) gray 21px 18px no-repeat!important;
}
and as both div elements have the property position:relative;, I have tried with z-index but it does not seems to work. I know that its impossible to make a parent div to change style when hover a child.
Edit: Hi guys i find a solution like a hardcode but its work ;) as the counter div was on top i made the #counterdiv on hover at the same size as the #menu-item-130 and puted the same backround style to it so now its work. Thanks for the help anyway..
I am not sure if i understood your question, but here is an example how it could work for you:
DEMO
Explanation
The :hover even you already fine works fine. But there is something called propagation, which will make the browser detect in which parent element your cursor is, and trigger the events/pseudo-elements/pseudo-classes related to this element. In order to stop this propagation, (in CSS), you need to counter it with the child element's properties.
Parent's background property: gray
Child's background property: transparent !important
To understand what !important clearly does, I suggest you to read more about CSS Specificity (MDN)
Solution
Apply a transparent background to the element itself with the !important notion:
HTML
<div id="item-130">Item 130
<div id="counterdiv">CounterDiv</div>
</div>
CSS
#item-130:hover > #counterdiv {
background-color:gray;
}
#counterdiv:hover {
background-color:transparent !important;
}
Live Demo
I'm needing to remove the border above the scrolling images here: http://briansmall.com/inovar/capabilities-test.html
Trouble is, my style.css (line 367) seems to trump my screen.css, and I can't remove the border without removing it from the #left-nav a (on the same page), which I don't want to do.
Can anyone help me remove the border-top from the img on this particular page? I hope I'm making sense.
Thank you.
I appears you have border: 0 none;, not sure what you're trying to do here (you should pick one: Should I use 'border: none' or 'border: 0'?) , but if you set your css to:
img { border: 0 !important; }
in your stylesheet, that should override your inline style and remove the border on all sides.
you should try this img{border: 0}
Edited
Look into these:
try to remove border from parent of your <img>. In this case from your <a> tag
set your border in #left-nav a to none
OR
if you can't edit it, you can add new element rule for your <a> in slide show and set
border: none !important;