I've been playing around with CSS and using the > operator to select child elements on hover.
I'm trying to hide two divs while hovering over another. However I am not sure how to select an external div? I've got this so far:
http://jsfiddle.net/s3rdqwuq/
.shares:hover>.catlink {
display:none;
}
.shares:hover>.shareimage {
display:none;
}
The issue is with the last two parts of the CSS file (above). The > only selects child elements so in this example on hover of "shares" I want to hide "catlink" "shareimage" and show "homenetworks".
Is there a way to select external elements on:hover to achive what I am trying?
Thanks!
Related
I have multiple parent divs that each contain multiple child spans. Only a select one of these spans do I want to hide upon hovering of the parent div. Currently, I am grabbing all of the parent divs like this:
div[id*=timeline_record_container]
Each of these parent divs contains the string timeline_record_container followed by a unique and dynamic ID. Then I am doing something similar with it's children:
span[id*=timeline_record_default_icons]
Where they all have the string timeline_record_default_icons followed by a unique/dynamic ID as well. Adding both of these selectors together and the hover event gives me something like this:
div[id*=timeline_record_container]:hover > span[id*=timeline_record_default_icons] {
display: none;
}
My thought here is on hover of timeline_record_container divs, find the timeline_record_default_icons one and set it to display: none. However this isn't working, am I ordering these wrong?
Edit: I added the HTML. The highlighted span is what I want to hide inside of the top level div in the image.
In your screenshot, the span you're targeting to hide is not an immediate child of div[id*=timeline_record_container].
Consider the following snippet:
<div class="parent">
<div class="brat">
<span class="target">The target</span>
<div>
</div>
In the above snippet, to access target, you could write:
.parent .target {
…
}
But not:
.parent > .target {
…
}
You could access .brat as an immediate child, because it lives on the first nesting level below the .parent node.
.parent > .brat {
…
}
So, back to your example. I think simply removing the > symbol before the span should do the trick.
div[id*=timeline_record_container]:hover span[id*=timeline_record_default_icons] {
display: none;
}
I thought I knew this. There's three divs (.service-box) inside one wrapper div (.p-div)
How do you target the first (or any.) of the three inner divs?
This works, shows the structure is correct, will remove all inner divs.
div.p-div > div.service-box { display: none!important;}
I just can't target the first inner div.
I've tried first-child, nth-of-type(1), nth-child(1)
I did notice nth-of-type(1n) removes all inner divs like the first CSS line. While nth-of-type(2n) removes all but the 2nd inner div. Basically doing the opposite of what I would expect (apply display:none only to the 2nd div, leaving the others intact)
Gotta say I'm a little perplexed. Could just edit the HTML directly but.I thought we were past that you know?
.p-div > .service-box:first-of-type {
background-color: red;
}
Get a child of .p-div that has class .service-box and then select only the first child.
.p-div could be anything: some-selector > .service-box:first-of-type
CodePen: http://codepen.io/theblindprophet/pen/JKpwLk
I'm trying to make a CSS selector that matches all links except the hovered one.
Naturally I though of using the ~ operator to catch around elements:
a:hover ~a
This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:
a:hover ~a, a ~a:hover
But no success.
Here is a JSFiddle that shows what I am talking about.Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.
You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.
However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?
Demo Fiddle
(and an alternative)
div:hover a:not(:hover){
color:red;
}
Demo (with green and red color)
css
a {
color: #f00;
}
div {
display: inline-block;
}
#scope1:hover > a, #scope2:hover > a{
color : #0f0;
}
#scope1 a:hover, #scope2 a:hover {
color : #f00 ;
}
The following selector matches all links except a hovered link:
a[href]:not(:hover)
When no link is hovered, this matches all links, which logically satisfies the requirement.
Note that a matches all a elements, including <a name=...>...</a> (outdated, but works) and <a>...</a> (valid, mentioned in HTML5 specs). Using a[href] restricts us to a elements that have href attribute, i.e. to links.
If you actually meant to ask for a selector that matches all links except a hovered link if there is a hovered link and no element otherwise, then there is no CSS solution (but there are JavaScript solutions).
I am using css media queries in my main css file for printing some page elements.
Here is the sample code
body *
{
visibility: hidden;
background: #FFF;
margin: 0px;
padding: 0px;
}
#Grid *
{
visibility: visible;
}
But my application is huge and I don't want this to affect the existing functionality. So I only want this css to apply on the pages where <Div> element with id <Grid> exists also writing this in other css file and using in each page would be very time consuming as I need this functionality on about 80 pages.Is there any way to select all body elements where div with id Grid exits in a single css file for all the application ? I am thinking of something like
body [div="Grid"] * {}
but unfortunately this doesn't works.
AFAIK selecting parent element using child element is not possible in either CSS2 or CSS3.
But you can do this with CSS4, check Is there a CSS parent selector? for more info :) FYI this is not supported in any of the browsers. But just mentioning the code below
body! > div#Grid {
background-color:red;
}
Here is the fiddle which shows above example http://jsfiddle.net/M75wZ/
But if you are open to third party JS plugins which enables parent selectors, here is a plugin that does the job https://github.com/Idered/cssParentSelector/blob/master/jQuery.cssParentSelector.js.
But if you just want only for this requirement and want to make it work, do like below
window.onload = function(){
var div = document.getElementById('Grid');
if(div){
if(document.body.className.indexOf('bodyHasGrid') == -1){
document.body.className += " bodyHasGrid";
}
}
}
Then apply styles using body.bodyHasGrid
Hope this gives at least an idea of doing it.
Edit:
any way to select all body elements where div with id Grid exits
NOT POSSIBLE WITH CSS as we don't have parent selector yet, so you cannot select any parent based on child element.
Inorder to select the div element, having an id Grid, use the selector below
div[id="Grid"] {
/* Styles goes here */
}
Demo
Note: Above selector will select only those elements having an id Grid, if you expect to target entire page where an element with the id Grid exist, than you cannot do that.
If you want to target elements uniquely which are on a particular page, than call the same id on body element, and replace div with body and further nest the element you want to target like
body[id="Grid"] div.target_unique {
/* Styles goes here */
}
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->