I have this html code
<div id="mybox"> aaaaaaa </div>
and this is my css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code
I think I should put some code under #mybox:hover but I don't know the code.
Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;
IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.
Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.
Here is the simplest way to do it with CSS3:
#mybox:hover {
color: transparent;
}
regardless of the container color you can make the text color transparent on hover.
http://caniuse.com/#feat=css3-colors
Cheers! :)
Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.
If you only want to hide the element but retain the space occupied by it, you should use:
#mybox:hover {
visibility: hidden;
}
If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:
#mybox:hover {
display: none;
}
Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:
document.getElementById('mybox').className = 'hide';
and define the "hide" class in CSS:
.hide { display: none; }
sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.
You could make the text color the same as the background color:
#mybox:hover
{
background-color: red;
color: red;
}
What about opacity
#mybox:hover {
opacity: 0;
}
Best way to hide in html/css using display:none;
Example
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
This is a late answer but still, guess setting the color to transparent is the best option.
#mybox:hover{
background-color:red;
}
There are many ways to do it:
One way:
#mybox:hover {
display:none;
}
Another way:
#mybox:hover {
visibility: hidden;
}
Or you could just do:
#mybox:hover {
background:transparent;
color:transparent;
}
#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }
though it should be noted that IE6 and below wont listen to the hover when it's not on an A tag. For that you have to incorporate JavaScript to add a class to the div during the hover.
I would say:
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}
<div id="mybox">
This text will disappear on hover
</div>
This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well
Sorry to be 7 years late but this could be achieved by using the below:
.your-block{
visibility: hidden;
width: 0px;
height: 0px;
}
This will keep the content on the page and won't occupy any space whereas display:none will completely hide the content.
Using the above code can be useful if you need to reference code in a div but don't need it to display.
.button {
width: 40px;
height: 40px;
font-size: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%;
}
<button class="button">Поиск</button>
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 have this in line:
<div class="blue-car">
Car
</div>
<div class="iColor">
Blue
<div>
.blue-car:hover { color: red; }
.iColor:hover { color: read; }
I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.
ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.
I would love to have this in css only. No jquery. I have tried many no achievement at this moment.
Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru
To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).
It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.
Markup:
<div class = "area">
Link
<img src = "http://placehold.it/100x100" />
</div>
Styles:
.area {
display: table;
position: relative;
}
.area:hover > a {
color: red;
}
.area > img {
cursor: pointer
}
.area > a {
position: absolute;
right: -50px;
top: 50%;
font: bold 15px/2 Sans-Serif;
color: #000;
text-decoration: none;
margin-top: -15px;
}
.area > a:hover {
color: initial;
text-decoration: underline;
}
.area > a:hover + img {
opacity: 0.5;
}
Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.
Change your code to this:
<style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
</style>
What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.
If this wasn't your problem I'll fix my answer.
I'm not quite sure what you're asking because your question is a bit unclear.
From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.
That's a simple fix: all you need to do is drill down through the div to the link.
.blue-car:hover a{
color: red;
}
.iColor:hover a{
color: red;
}
Demo
Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:
a:hover{
color: red;
}
Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.
The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue:
So here's what Im looking to do in its most simplified form. I want to have a box appear on the page and when you hover over it, it's contents are visible, otherwise they are hidden. So for example let's say we have this:
<style type="text/css">
#box {
background-color:red;
width:100px;
height:100px;
}
</style>
<div id="box">
<img src="smileyface.png" />
</div>
Most of the time, the image is hidden and this looks like a red box, but when the div is hovered over the image appears. Is there any way to do this with CSS and not javascript. I know with javascript we could just remove the element and add it back in as we go, but I just want to show it and hide it. Thoughts?
*Must be IE 8 compliant because I'm a glutton for punishment.*
This is quite easy. Just change the display property of the image when the #box is hovered
#box > img {
display: none;
}
#box:hover > img {
display: block;
}
You can use :hover on any tag you'd like to:
#box {
background-color:red;
width:100px;
height:100px;
}
#box:hover {
background-image: src('smileyface.png');
}
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>