I have a really simple example below of what I am trying to do, and a fiddle here
<html>
<head>
<style>
#testDiv{
display:block;
}
#hiddenDiv{
display:none;
}
#testDiv:hover + #hiddenDiv{
display:block;
}
</style>
</head>
<body>
<div id="testDiv">
<h1>Hello World</h1>
<div id="hiddenDiv">
<h2>Hidden normally</h2>
</div>
</div>
</body>
</html>
Basically, when I hover over the #testDiv, I want to display #hiddenDiv. I need to put the div I wish to display inside #testDiv or else it won't be accessible when I move the mouse onto it.
Is this possible with CSS, or will I need to use Javascript?
I don't see the display changing in Google Chrome, but in case you have something else changing it in your scenario, you could try this:
http://jsfiddle.net/RDBf9/
What I did was add another style only for the testDiv hover
#testDiv:hover{
display:list-item;
}
Update
In your updated scenario, testDiv became a parent ( congratulations! ) of hiddenDiv.
So you need to select the hiddenDiv that has a hovered parent with id testDiv, like this:
#testDiv:hover #hiddenDiv{
display:block;
}
P.S: In CSS, selectors are readed from right to left. That is the order browsers read them too.
This CSS from your example:
#testDiv:hover + #hiddenDiv{
font-weight:bold;
}
is saying:
any time #testDiv is hovered, set any sibling #hiddenDivs to font-weight: bold;
The + means sibling. It works in your second example because #hiddenDiv2 is a sibling of #testDiv2.
When the target items are nested the CSS selector changes to a child selector. This:
#testDiv:hover #hiddenDiv {
display:block;
}
is saying:
any time #testDiv is hovered, set all child #hiddenDivs to display: block;
Related
i am a beginner in html and css could anyone please tell me the difference between these 2 codes , i am getting the same result in both of them. i mean is there any difference between putting classes in div tag & putting them directly in h1 tag.
CODE 1
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:white;
}
.box {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
</style>
</head>
<body>
<div class='box'>
<h1>
main text
</h1>
</div>
</body>
<html>
CODE 2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:white;
}
.box {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
</style>
</head>
<body>
<h1 class='box'>
main text
</h1>
</body>
<html>
in both codes i get the same main text inside the box so does it mean that class in div tag is doing the same thing what class in h1 tag is doing?
does it mean that class in div tag is doing the same thing what class
in h1 tag is doing?
In this case yes, but not necessarily. The second example is better. If you want to make sure you are only applying styles to the heading, apply it to the heading, not the parent element (the div in this case). For instance, what if the div contained a P element as well? In the first example, the H1 and P elements would have a red background since the parent block-level element has a red background. In the second example, only the H1 element would have a red background.
On more complicated projects, like an existing website, there will often be existing stylesheets that you wish to override. Always apply styles to the closest element, or the exact element you wish to style. Also browsers have built in styles for common elements like headings, tables etc. Try using no CSS whatsoever and view the difference between H1 and P elements. Different browsers will apply their own styles, so a common practice is to apply a set of styles to "reset" or override the browser styles. (Another example is making a page with red background for HTML and black for BODY. Look at the browser-defined margins.)
Finally, another approach to only control the H1 element if it is inside a DIV with a class of "box" would be this CSS:
.box h1 {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
the output is both codes are the same.
but there is no technical difference just the second code is using extra div
I'd like to make all div tags invisible except for the one I mark active in html. Below is an extract from my page:
<div id="container">
<div id="1">
invisible
<div>invisible</div>
<div>invisible</div>
</div>
<div id="2" class="active">
visible
<div>visible</div>
<div>visible</div>
</div>
..or via javascript dom:
document.getElementById("2").classList.add('active');
The expected behavior is that just changing the class will render all "active" classes visible and all unmarked classes invisible at all times.
My first attempt, before adding the parent container and selecting with it,
<style type="text/css">
div { display:none; }
div.active { display:block; }
</style>
did not work. It made all divs invisible.
This second attempt, accurately selecting what I really wanted to select, works fine:
<style type="text/css">
div#container>div.active { display:none; }
div#container>div { display:block; }
</style>
Is this the right way to override a default style?
You can use the :not(selector) selector. Reference: w3schools.
Just add to every div yourChoice + active classes and when you want them to disappear, remove the yourChoice class. Then with the :not(.active) { display: none } they are all gone.
Here's a codepen https://codepen.io/sebaLinares/pen/EddNbQ
Hope it's useful
I'm trying to make a div with text within it that is going to change whenever the user hovers over the div area, and not only the p tag. I am however not able to make my solution work.
JSfiddle
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover + p{
color:#fff;
}
Take away the + symbol in your css:
JSFiddle
CSS:
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover p{
color:#fff;
}
If you were looking for the selector which means direct descendant of div, you wanted >.
eg:
div:hover > p{
/*styles*/
}
Which would have worked for:
<div>
<p>Stuff</p>
</div>
But not
<div>
<span>
<p>Incorrect HTML example</p>
</span>
</div>
With your current CSS, you're trying to select the sibling.
If your HTML was like this:
<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>
the colour of p would have changed.
Ultimately however, with this specific HTML, you don't even need to include the p in the css and can just do div:hover, but if you're going to have other elements in it, then you should keep the p.
Take out the + P
div:hover {
color: #fff;
}
In your css you have used like this.
div:hover + p{
color:#fff;
}
It means you are applying the hover style for the siblings element not child element. In your case you need to remove + and add just space.
SIBLINGS ELEMENT PROVED HERE
div:hover p{
color:#fff;
}
CHILD ELEMENT PROVED HERE
there is no need to mention the <p> at all you can simply state the colour of all child elements by setting the style on the parent:
JSFiddle
div:hover {
color:#fff;
}
However if you did just want to target the paragraph text only you would use a > (child combinator) to target the P ONLY.
You must read rule about descendant selectors here.
If you need more info about selectors in css
Solved:
div:hover p{
color: #fff;
}
Your Css:
div:hover + p{
color:#fff;
}
+ selector select all <p> elements that are placed immediately after <div> elements.
Demo Fiddle With "+" selector
You can see, In the above fiddle div:hover + p select the outer <p> element, which are placed immediately after <div> elements.
But in your Case you do not need to use + selector. Because you want to select the child element of hovered div.
So, you should try this:
div:hover p{
color:#fff;
}
Working Example
I am trying to remove an underline from an href, that is wrapped in a div element. But for some reason it is not being removed.
Can anyone please help me? Below is the code.
<style>
a .menu_items {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
</head>
<body>
<div class="menu_items"> Pizza </div>
Try this:
a {
text-decoration:none;
}
Cause you are trying add text-decoration to the div with class .menu_items but not for tag a
you can do this and it will be easier after developing more pages and you will not have to create a style for each one you only have to call your style from your css
i explain you...you have to found your css default in your project or create a new one and load in your page where you want to call the styles that you will create in your css file....insert this in your css
a {
text-decoration:none;
font-size: 34px;
color:red;
}
and in your page after loading your css file you only have to copy this as you were codding
<body>
<div class="menu_items"> Pizza </div>
</body>
i hope i helped you
Please try putting the A link inside the DIV then reverse the CSS order. I believe the other way around is not valid.
just delete the selector '.menu_items' like this
<style>
a {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
<a href="#">
<div class="menu_items">
Pizza
</div>
</a>
here's the jsfiddle
The CSS property for removing the underline is
text-decoration:underline;
You will need to apply this to your anchor element.
See this here-> http://jsfiddle.net/CzDkH/
Hope this helps!!!
Place this above all your styles:
a {
text-decoration:none;
}
Get in the habit of placing all a , html , and body style properties at the top of your styles too! It will save you from headaches like this.
Happy styling :)
If you only want to do it for the class "menu_items" and not in the rest of the page, the only thing is you've got it back to front. It's like this:
.menu_items a {
text-decoration:none;
font-size: 34px;
color:red;
}
Similarly you've got the div inside the a tag, and should have the a tag inside the div
<div class="menu_items">Pizza</div>
I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
http://jsfiddle.net/LgKkU/
You cannot affect a non-child element using :hover from within CSS2, which is supported by all common browsers.
You can affect a sibling element using CSS2.1 selectors, like so:
a:hover + .sibling { ... }
However, this only works for direct siblings. This means you could have HTML like this:
<p>Cheetah <span class="sibling">Blah Blah Blah</span></p>
Notice that the a and the span are direct siblings.
Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/
However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.
Edit: Corrected my mistake on the CSS version for the + selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.
Or, if you're open to it, use jQuery.
Something like this would work:
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
And remember to wrap this in a DOM ready function ($(function(){...}); or $(document).ready(function(){...});).
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
For example, if you want a tooltip to appear when hovering over an adjacent button:
.button:hover ~ .tooltip {
display: block;
}