let's consider we have the following code:
<div class="post wrapper">
<div class="post title">
<h3>Title</h3>
</div>
<div class="post thumb"> // This has the post thumb set as background image
<div class="post overlay"></div>
</div>
</div>
That with some extra CSS will result in:
If I want to get a nice effect when the user has the mouse the image I can do;
div.post.overlay:hover {
background-color: rgba(0,0,0,0.2);
}
Now, the :hover effect will not work if the user places the mouse on the Title text / white box. To get around this I'm using:
div.post.wrapper:hover div.post.overlay { // => note where :hover is
background-color: rgba(0,0,0,0.2);
}
Is this valid CSS? Will it work reliable across browsers? Is it okay to call :hover on the wrapper and then set the background-color on the overlay. It seems to work under Google Chrome and Safari.
Thank you.
This is perfectly okay. As long as the div.post.overlay is inside the div.post.wrapper, when you hover over the div.post.wrapper, the div.post.overlay gets the styles applied. This is valid in all browsers and it's a normal descendant selector.
Related
I am displaying a recordset using div and want to change the background color on alternating rows. I have done this successfully in the past using an HTML table, but I can't figure it out using div.
The data displays properly, but there is no color other than the page's background color.
I assume it is something very simple that I am doing wrong, but I can't see it.
Here is the relevant code section and the CSS styles I tried (in a related css file). I tried both odd and even. Neither worked. And the ".indexrow{background-color: #94C8F2;}" doesn't work either.
<div class="indexrow">
<?php
$wa_startindex = 0;
while(!$rsTitle->atEnd()) {
$wa_startindex = $rsTitle->Index;
?>
<div class="column left">
<?php echo($rsTitle->getColumnVal("Title")); ?>
</div>
<div class="column middle">
Issue: <?php echo($rsTitle->getColumnVal("IssueID")); ?>
</div>
<div class="column right">
Page: <span class="BlackHeadline3"><?php echo($rsTitle->getColumnVal("Page")); ?></span>
</div>
<?php
$rsTitle->moveNext();
}
$rsTitle->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>
</div>
.indexrow{
background-color: #94C8F2;
width: 100%;
}
.indexrow:nth-child(even){
background: #f2f2f2;
}
.indexrow a:hover{
background-color: #FFFF00;
}
I think your mistake is putting the nth-child() on the parent? nth-child needs to go on the children you are listing out because nth-child(odd) is saying "every instance of this element that is an odd child. I think you have fallen for the common misconception that nth-child(odd) means: "any odd child of this element"
I know this is a pretty newb question, but I cannot seem to find an answer to it via Googling. I am using the Chrome plugin StyleBot to alter the CSS of an internal tool used by the company I work for. So I only have access to editing CSS.
I am attempting to make it so when I hover a specific element on the page, it changes the background color to highlight the information. What I need to do is make it so that ONLY the .row element I am hovering changes. Currently the way I am doing this is changing ALL .row elements. Basically, with some back-end code they are generating a list, each item in the list is coded with this:
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
So in the live environment it looks some what like this and keeps repeating:
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
The CSS I am using to try and highlight a row when I hover it:
.row:hover {
background-color: red;
}
I know why this would alter all the .row elements, but I cannot figure out how to make it alter ONLY the one my mouse is over. Any help would be appreciated!
maybe you mean each single(descendant) element in row:
.row> *:hover {
background-color: red;
}
http://jsfiddle.net/maio/tyLayh3c/1/
Your current code does not highlight all the elements when one is hovered, it works like you think. Although, with the code you gave none of them will highlight since there is no size to the '.row' span's, they don't have any width or height for a background. So the following code worked for me:
.row span:hover {
background-color: red;
}
This selects the spans inside of the row and changes their bg colors.
http://jsfiddle.net/snoapps/2oha40h5/
EDIT:
maioman's response probably would be safer since you might add more elements to the .row that aren't span's, then their backgrounds wouldn't be highlighted. So .row> *:hover {} would work better then.
Answering my own question here. Thanks you guys for validating that code will indeed work. It is in fact a problem with the rest of the web page so I now need to go through and manually tell it to not apply a hover to nearly every other element. Thanks again everyone!
When you hover over the icon images the background color turns black. How do I change this to grey?
<h2>Contact Us Anytime!</h2>
</div>
</div> </div></section>
<section class="container"><div class="row">
<div class="spb_content_element col-sm-6 column_container">
<div class="spb-asset-content">
<section class="container"><div class="row">
<div class="spb_icon_box col-sm-12">
<div class="spb-asset-content">
<div class="sf-icon-box sf-icon-box-left-icon sf-animation sf-icon- " data-animation="none" data-delay="0" style="background-color:;"><div class="sf-icon-cont cont-small sf-icon-float-none"><i class="fa-map-marker sf-icon sf-icon-small" style="color:;"></i></div><div class="sf-icon-box-content-wrap clearfix"><h3 style="color:;"></h3><div class="sf-icon-box-content" style="color:;">
<p> CT</p>
</div></div></div>
</div>
</div> </div></section>
Change:
.sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
background-color: #222!important;
}
To:
.sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
background-color: #8C8C8C!important;
}
How to scrutinize CSS like a pro
1) Right click on the HTML element -> Inspect element
2) Right click on the specific DOM -> Force element state -> :hover
3) * Play with the CSS on the right panel at real-time until you are satisfied.
When life gets complicated
Sometimes a sophisticated programmer decides to change the CSS on the fly using Javascript. So the second step won't help. To solve this issue you can hover the desired element and witness the DOM is being changed. I saw the DOM is being fulfilled with the sf-hover class so I added this class manually. That's how I was able to play with the CSS on the right side.
I have an editable body with a div:
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
And a :before style:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?
You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.
See that if you set the property in the child div instead, you can make it work.
div.paragraph:before {
content: "☑";
}
<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>
When this issue is reproduced, (via this fiddle, for instance) the developer tools show that div.paragraph is removed. Only a text node remains.
becomes
To stop the div from being removed, don't give its parent contenteditable. Use this instead:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
You are not editing the :before content.
It just removes the whole .paragraph element once it gets empty, or if you backspace when you are at the beginning of the tag.
The other answers explain the problem. If a div inherits its edit-ability from its parent, it is possible to remove the child div itself and together with the div also the before-content.
In order to prevent this, it is necessary that the editable div must not be placed in an editable parent. This makes it necessary to put every editable div into a non editable parent div to preserve the editable child div.
The following example shows this
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Possible workaround this problem. This seems to working as you want it to be.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}