I have a DIV element which is hidden by default. But on hover, I want it to be visible.
This is my current CSS:
.main-menu .left-footer{
display: none;
}
.main-menu:hover + .left-footer {
display: block !important;
}
And HTML:
<div class="left-footer">
<small>
Support Terms of Service Privacy <br />
© 2015 LittleBux. All Rights Reserved
</small>
</div>
What am I doing wrong here?
I am taking example from this topic
They're using conflicting selectors. In the first, .left-footer is a child of .main-menu. In the second example, it's a sibling.
As you haven't posted the bit of code with .main-menu I'm not sure about it's relationship to .left-footer, but you need to make the two rules consistent.
Seems to me like you're getting display and visibility mixed up. display: none; makes the element disappear from the document, meaning you can't interact with it. What you want to use instead is visibility: hidden;, which makes the element hidden but still keep its place on the page. Try changing the first block of code to the following:
.main-menu .left-footer{
visibility: hidden;
}
.main-menu:hover + .left-footer {
visibility: visible;
}
Related
How can I hide/remove the "Category:" text here without touching what is inside <span> </span>?
<h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>
Thanks in advance.
Edit: I missed the important detail below. As another answer might have noticed, trying something like display: none and display: initial isn't going to work.
How can I hide/remove the "Category:" text
The initial CSS keyword can be applied to children to reset styles. As the doc mentions, sometimes initial has unexpected results, check out its peers inherit, unset, and revert. To give an example using text color:
h1 {
color: red;
visibility: hidden;
}
h1 > span {
color: initial;
visibility: initial;
}
<h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>
You could change visibility to hidden or font-size to zero on parent and reset it on the child. Without attaching any styles to the child, it's not possible with css.
If it's possible to use JS, try this:
$("h1").contents().filter(function(){
return (this.nodeType == 3);
}).remove();
<h1>Category:<span>Men</span></h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Or, with CSS only:
h1 {
font-size: 0px;
visibility: hidden;
}
h1 span {
font-size: 36px;
visibility: initial;
}
<h1>Category:<span>Men</span></h1>
I think my classes or ID's are messed up when I try to call it.
CSS:
image#ply : hover .ply-text {
visibility: visible;
}
HTML:
<image id="ply" style="height: 50px; padding:5px;" src="images.png">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Some issues first:
The HTML element for embedding images is called img.
An img element's content model is empty, i.e. it may not have any child elements.
Even if those were not issues, you would not see the effect you're looking for since the text is already visible at the start.
Given that, here's a possible solution:
.ply-text {
visibility: hidden;
}
#ply:hover ~ .ply-text {
visibility: visible;
}
The ~ is a sibling selector that allows one to refer to an element following another.
Images use an <img> tag (not 'image') - that's important to note (as it hasn't been commented on so far). As remarked, you should remove the space between the id and the :hover in your css.
I would advise you remove the inline style and use css or at least add it into your id style/ add extra attributes as a class in the head of the body (css is better!).
In the style, you don't need image/img before the definition of your id, you can just leave #ply{your style} on it's own.
If you want to display the pic on hover, I would use display:block/none instead. Visibility just shows it if it's hidden. (I've done so in the snippet, run and see if it's the desired effect). Also, use an alt tag! I added one. If you want to show/hide the text you could use either but first you have to set the visibility to hidden or display to none... I added a class for ply-text on its own for this.
So your code would read
#ply {
height: 50px;
padding: 5px;
}
.ply-text{
display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
display:block; /* or visibility:visible*/
}
<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
<p>Click for more info!</p>
</div>
Hope this helps
I got some code here:
<html>
<head>
<title>Select View</title>
</head>
<body class="class-1 class-2 class-3 class-4 class-5 class-6">
Many divs here
...
...
...
<div id="test">
<p>PHP code here</p>
</div>
</body>
</html>
And I want to hide the div with the test id. My site is based on wordpress, so in css I have to refer to a specific body.
I tried:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
color: red;
}
and the color is working, "PHP code here" is on red color, but when i do this:
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
all site dissapears.
Any ideas how to hide only this div?
Just use what you have already
div#test{
display: none;
}
When you called body.class-1, .class-2, .class-3, .class-4, .class-5, and set display: none, it is the expected behaviour, because you are hiding all elements rather than just the test div!
Since you don't repeat the id in other elements you can just use,
#test {
display: none;
}
Just in-case if you have another element (ex: span) with the same id you have to specifically mention that you need to hide the div element with id=test
div#test {
display: none;
}
It is always a good thing to uniquely mark your elements if possible. Since you are dealing with classes if you just mention one class it will select the matching element.
In the below case you used your selection is the whole body,
body.class-1, .class-2, .class-3, .class-4, .class-5, div#test{
display: none; //or visibility: hidden;
}
This might be the same case if you just use the below code,
.class-1 {
display: none; //class-1 supposed to pick the whole body here;
}
This question already has answers here:
List with nested `overflow-x: hidden` hides list counter/point - why/is this a bug?
(2 answers)
Closed 6 years ago.
I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding.
The ordered list below has 1 item, which in Firefox and IE10 is numbered (although in IE, it's positioned wrong). In Chrome though, the number is hidden entirely.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px;
}
<ol>
<li>
<div>Some text that trails off</div>
</li>
</ol>
What's going on/is this a bug/can this be worked around?
Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.
CSS
ol > li:before {
content: '';
display: block;
height: 1px;
}
div {
margin-top: -1px;
}
Demo
Try before buy
This isn't a bug so to speak, more of a difference in how different browser engines render the CSS. (Blink vs Trident vs Gecko vs WebKit etc)
Technically speaking, the Chrome display is correct due to hiding everything outside of the div as specified with overflow: hidden;.
If you use the Chrome Inspector, you can see where the edges of the elements are and the number is outside of that area.
Your best work-around would be to set an additional piece of CSS to override the main div element.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
}
ol div {
overflow: visible;
}
<!doctype html>
<html>
<body>
<ol>
<li>
<div>Some text</div>
</li>
</ol>
</body>
</html>
If you need to use the div inside li, display the div as inline, otherwise list-style: inside will work.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px; display: inline;
}
<ol>
<li><div>Some text</div></li>
</ol>
Define selectors for these elements.
Your going to began to run into problems if your just using global tags: <li> <div> especially since your nesting here.
eg:<li class="dothis"> <div class="thisdivdoes"> ...
After you do this it would be easier to differentiate overflow:hidden; where and not where.
Since your tag is within your <li> define what you want them to do individually since that's what you want to do, or else you may see them inherit each other as your experiencing.
Also, check your doctype in HTML5 I think it's not valid while in strict it may be.
<article id="node-13" class="node node-article node-promoted node-teaser contextual-links-region clearfix" about="/fos/node/13" typeof="sioc:Item foaf:Document">
<header>
<h2 class="title" property="dc:title" datatype="">
TITLE GOES HERE.....
</h2>
</header>
</article>
I need to hide the title using CSS.
How can I do that...
As I am totally new to CSS kindly advice how to do this..
UPDATE:
For the unique article id
if we give title:hidden it will not display for all nodes.
In my case it should not display only for specific nodes.
Give it display:none;:
article#node-13 h2.title { display: none; }
Alternativly use visibility:hidden;
article#node-13 h2.title { visibility:hidden;}
display:none means that the the tag in question will not appear on the page at all - rhere will be no space allocated for it between the other tags.
visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.
To remove the element from the flow of the page:
display:none;
To hide the element but keep it in the flow of the page:
visibility:hidden;
Try article#node-13 h2.title { display: none; }, this will only hide the title element if it is inside node 13,
Demo: http://jsfiddle.net/SO_AMK/2QQDd/
If you would like to hide the entire article then you could do this: article#node-13 { display: none; }.
Please note that display: none; completely removes the element from the page flow, this means that the element will not only be invisible but it will completely collapse.
If you would like to merely hide the element and not "collapse" it then you should use article#node-13 h2.title { visibility: hidden; }. As you can see in the demo, it still takes up space above the second link,
Demo: http://jsfiddle.net/SO_AMK/wwRsa/