How can I make a link that appears when the mouse is over the main area like a youtube comment.
I have this code - but when the mouse is over the .showme class it's not visible like the showhim element.
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
Maybe you want the inner div to be in the flow of the outer. In that case use
.showhim:hover .showme{
display : inline-block;
}
Or, if you want to display the inner div on :hover for the inner div too, use
showme{
visibility: hidden;
}
.showhim:hover .showme{
visibility: visible;
}
Just one thing: Maybe you tested with IE 6. The dirty one from Redmond doesn't know :hover on elements other than <a/>. He doesn't know display: inline-block either by the way.
Related
I would like to hide this:
https://i.imgur.com/nStKvPS.jpg
What should I add in custom CSS?
In your css file:
#banner-694641362 {
display: none;
}
Tip: You also can use opacity: 0; or visibility: hidden;.
display: hidden makes an element invisible, but it still affects the rendering of surrounding elements. display: none removes the element from the document flow, so it doesn't affect other elements' rendering.
display: none;
That will stop it from being shown
EDIT (08/09/13): You can see the error here.
I have a jQuery drop-down (it replaces the standard select with a based drop-down) that's set to overflow:visible, and in Firefox, the drop-down overflows into adjacent content like it should when clicked. But in Safari, the drop-down, even without being clicked, moves adjacent content around the drop-down. Below is a picture of what I'm talking about.
Any ideas why this might be happening?
On your gf-style.css on line 297 you have "overflow: visible". That's what is causing consistency issues. Remove that and should be fine on all browsers.
EDIT: That was not it, this is the solution. Add this in your CSS file:
.clearfix {
display: inline-block;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.clearfix {
display: block;
}
And then add this class to your two_col_container div:
<div class="two_col_container clearfix">
Is it possible to use the :not() selector/pseudo thing with :after?
So for example if I have the following:
li:hover > ul
{
display: block;
}
li:after
{
content: " ";
width: 200px;
height: 200px;
background: #cccccc;
position: absolute;
top: -100px;
left: -100px;
}
What happens is that if a person HOVERS over the content that is created by the after it will also make the child menu display block. In other words hovering other the LI or the AFTER content is acknowledged as hovering the LI. How would I stop this, so it only does the display block when hovering the ACTUAL LI and NOT the content created using AFTER.
I thought about: li:hover:not(:after) > ul { display: none; } but hasn't worked...
Also tried: li:after:hover > ul but also didn't work.
Any ideas for this? It might seem trivial but it's causes some issues in my design so need to stop it doing it asap.
As you observe, :hover styles on an element will be triggered when hovering over its contents, including descendants and pseudo-elements. However, you can't prevent :hover styles on an element from applying to its :after pseudo-element, nor can you use :not() to select :after pseudo-elements (this is explicitly disallowed by the spec).
This is by design, so the only way around it is to not use :after, but use JavaScript to generate some other element that you can append to the li and cancel the :hover effect on.
Actualiy it is possible with the use of the attribute "pointer-events" and assign it to none in the pseudo-element :after or :before .
So it would be -> pointer-events: none; in the pseudo-element.
I have the following:
<div id="tab-notes" class="clearfix">
<textarea cols=100 rows=15 class="full-width" id="dialogNotes" name="Pages">#Model.Notes</textarea>
</div>
I have added a clearfix class but it seems that the DIV does not stretch to fit the height of the textarea. Is there something simple that I am missing?
.clearfix:after, .block-controls:after, .side-tabs:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
giving your #tab-notes a background-color you'll see that it does stretch to the textareas high (like it should) if there really aren't any other css-rules that affect these elements.
you can see it in action here: http://jsfiddle.net/Mqke4/
the clearsfix seems to be senseless just given this snippet and doesn't change anything ( http://jsfiddle.net/Mqke4/1/ ). given this, there must be styles defined for .full-width, #tab-notes, #dialogNotes (or anything like that) causing this problem.
Is your textarea applied with float: left or float: right ?
If so, remove the float property from textarea.
But if you have to use that property,
the easiest way to solve the problem is to also apply the float: to your div too.
Or you can change the display type of your div to block by using display: block
There's more way to solve this problem.
But I think these are the easiest ones.
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}