look at this fiddle. I want that anchor will change its background-color when I click on the parent div. It works only if I click beside anchor. But if I moove cursor on the anchor and then click, nothing happens. It only works fine in firefox and chrome.
<div class="test">
link me
</div>
.test
{
background:Gray;
}
.test:active a
{
background:Red;
}
For consistency around all browsers i would put the active pseudo on the anchor tag instead.
.test a {
background:Gray;
display:block;
}
.test a:active {
background:Red;
}
See Fiddle
some class and pseudo not support by Opera try in this way, may this solve your problem.
.test
{
background:Gray;
}
.test:active a
{
background:Red;
}
.test a:active
{
background:Red;
}
Related
Everywhere on web I found that multiple css classes use a space as separator.
So, I'm write the following:
<div class="page hidden">
css
.hidden{
display:none;
}
Using the above code .hidden IS NOT hidden, but visible.
But using:
<div class="page, hidden">
.hidden IS hidden.
Any explanation !?
You were doing everything correct. The only explanation is that you have something else affecting it that you haven't put in your question.
Just to prove it works:
div {
height:300px;
width:300px;
position:relative;
border-radius:150px;
line-height:300px;
text-align:center;
}
div div {
height:150px;
width:150px;
border-radius:75px;
position:absolute;
top:75px;
left:75px;
line-height:150px;
}
.green {
background-color:green;
}
.red {
background-color:red;
color:white;
}
.hidden {
display:none;
}
.visible:hover .hidden {
display:block;
}
<div class="green visible">
<div class="red hidden">
hidden div
</div>
hover here
</div>
the stacking order of your css will effect the styles that are applied. Also the specificity of the tags used will effect what you see from the front end.
so as an example:
/* .hidden is ignored in this example because .page comes after the hidden tag */
.hidden {display:none;}
.page {display: block;}
/* where as this will hold as it's more specific to the page, so will take a higher priority */
body .hidden{display: none;}
/* or this as it's more specific to the exact tags above */
.page.hidden {display: none;}
Just for example:
.page{ display:block}
.hidden{
display:none!important;
}
jsFiddle: https://jsfiddle.net/r1us08a3/2/
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I have a very strange behaviour of "not()" css selector.
Here my simplified code:
<div id="mapDiv" class="mapDiv mapDiv1">
pippo
<div class="gm-style">pluto</div>
</div>
<div id="mapDiv2" class="mapDiv mapDiv2">
pippo
<div class="gm-style">pluto</div>
</div>
and my css:
.mapDiv1,.mapDiv2
{
width:300px;
height:100px;
border:solid 1px red;
}
.mapDiv div
{
width:200px;
height:50px;
border:solid 1px blue;
}
:not(.mapDiv1) div
{
color:green;
}
a jsFiddle is provided here.
I would think that color:green will be applied only to second box texts, due to not() selector.... instead it is applied to both.
Can you explain me why?
As per my understandings, :not() is a negation pseudo-class.
Which means, first you select a bunch of elements and then remove elements from the selected bunch using negation pseudo-class.
Hence it should be prefixed by a selector.
If you change your css to :
div:not(.mapDiv1)
{
color:green;
}
This will select all the divs except the divs with class '.mapDiv1'
And if you change the code to:
div:not(.mapDiv1) div
{
color:green;
}
This will select all the divs within a parent div except for those parent divs with class '.mapDiv1'.
More Reference Here
you have to change your code as
div:not(.mapDiv1)
{
color:green;
}
I updated your fiddle as Fiddle
Demo
div:not(.mapDiv1) div {
color:green;
}
For more on it read
try this
div:not(.mapDiv1) {
color:green;
}
How do you get the :before pseudoclass to render properly? Do I need some special CSS to make this work?
This does not work and does not display anything:
http://jsfiddle.net/XzMH6/
HTML
<div id="test"></div>
CSS
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
}
You need the content property.
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
content: "";
}
http://jsfiddle.net/ULfeu/
try this
please add this content:"" in #test class then :before is working properly
Demo
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.