I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.
Related
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
I have lots of vertical lines that are before <a> links, but I want to hide the third line.
Here is my CSS for my <a> before:
.header-social a:before {
//line style
}
I have tried using nth-child(), but i don't know how to use pseudo elements with nth-child().
.header-social a:before:nth-child(4) {
display:none;
}
Not sure how I could go into any more detail than I already have. Do I need JavaScript?
Do like this:
.header-social a:nth-child(3)::before {
color: red;
}
or using nth-of-type
.header-social a:nth-of-type(3)::before {
color: red;
}
I am wondering if how could I show other element when the user hovers to a certain element.
For example,
<div class = "hoverMe">Hover Me </div>
<div class = "showMe">Hello I'm in show state.</div>
.showMe{
display: none;
}
.hoverMe:hover {
// then what to put here?
}
If the user hovers on .hoverMe the .showMe will be shown in pure css thankz.
I don't have 50 rep yet, so I can't comment on the above answer.
It is possible to do this purely in CSS using the tilde (~);
.hoverMe:hover ~ .showMe {
display: block;
}
MDN docs
You have to use the adjacent sibling selector +
.hoverMe:hover + div {
display:block;
}
From MDN
It will select only the element that is immediately preceded by the former element
Fiddle
Using jQuery, you will have to use the hover() function
$(".hoverMe").on("hover", function () {
$(".showMe").css("display", "block");
});
I have this LESS setup:
.wrapper {
.parent {
height: 100px;
.children {
//some style;
&:hover {
.parent & {
height: 150px;
}
}
}
}
}
I need to change some height for parent element by hover on some child inside of it. This code is not working, so is there any possible to do this? Much thx for help.
Adding the :hover to the .parent instead of the .children div will achieve the result, http://codepen.io/duncanbeattie/pen/xvDdu
.wrapper {
.parent {
pointer-events:none;
height: 100px;
background:#000;
.children {
//some style;
height:20px;
background:#f00;
pointer-events:all;
}
&:hover {
height:150px;
}
}
}
The main problem here is that unfortunately you can NOT style the parent in any way from the perspective of a child's selector (with or without :hover) in CSS. See this answer here.
You can only style children according to their parents' selectors or siblings according to each-other's selectors.
That said, there are of course easy ways to achieve this with javascript/jQuery,
but not in LESS, as its output is CSS, so the above limitations apply again.
But fortunately some properties of children influence some properties of their parents ... so by styling children, you will affect the parent also. If the child (block) is positioned relatively inside a parent (block), the parents height should adapt to the height (including padding, margin and border) of the child, without you having to do anything really special to the parent.
DEMO
.parent {
width:200px;
background:orange;
}
.child {
background:red;
width:100px;
height:100px;
}
.child:hover {
height:200px;
}
<div class="parent">
<div class="child"></div>
</div>
Make your CSS like this:
.parent.over {
/* whatever style you want when teh child is hovered over */
}
Using jQuery:
$(".children").hover(
function() {
$(this).closest(".parent").removeClass("over").addClass("over");
}, function() {
$(this).closest(".parent").removeClass("over");
}
);
I have a pager in my page with anchors in it... I use the following css...
.page-numbers a {
color:#808185; cursor:pointer; text-decoration:none;outline:none;
}
.page-numbers a:hover {
text-decoration:underline;
}
.page-numbers a:visited {
color:#808185;outline:none;
}
But my anchor tag doesn't seem to take the css above instead it uses the css below,
a {
color:#0077CC; cursor:pointer; text-decoration:none;outline:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#4A6B82;outline:none;
}
Which i have given in the top of my stylesheet... Any suggestion...
The selector .page-numbers a means "an anchor tag inside a tag with the class page-numbers", e.g.:
<div class="page-numbers"><a>This would match</a></div>
If you mean an anchor tag with the class page-numbers, use:
a.page-numbers {
color:#808185; cursor:pointer; text-decoration:none;outline:none;
}
....
Are you sure your links are under a container with page-numbers class?
Are you sure your stylesheet is linked to the page correctly?
Are you sure its not link with page-numbers class? In that case you'll have to use a.page-numbers css selector to target the link.