Based on this question add a class without jquery if hover another class
I have a div which will display by hover of a span element. That works fine.
I have another div in the site which is animated with animate.css
If the div from above, is changed from display:none to display:block, the div is blinking/flutter.
(if I change the CSS by using jQuery, the div doesn't blink - what is the difference?)
In this snippet it works fine, I don't know why on my page it did not work?
.cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{
/*Styles without :hover*/
display:none;
}
.cl_maindiv>.cl_span_icon:hover+.cl_icon_content{
/*Styles with :hover*/
display:block;
text-align: center;
position: absolute;
font-size: 9px;
top: 1px;
margin: 0px;
right: 14px;
background-color: rgba(68, 68, 68, 0.90);
border-radius: 2px;
border: 1px solid rgba(50, 197, 210, 0.90);
box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25);
min-width: 30px;
color: #ddd;
text-shadow: 0 -1px 0 #111;
}
<div id="maindiv" class="cl_maindiv" style="float:left;border:1px solid #ff0000;">
<label>123</label>
<span class="cl_span_icon"> :-)) </span>
<div id="icon_content_div" class="cl_icon_content"> more happy faces :-))</div>
</div>
<link rel="stylesheet" href="https://www.4u.tools/assets/plugins/animate.css-master/animate.min.css">
<div id="animdiv" class="animated pulse" style="animation-iteration-count: infinite; float:left;border:1px solid #ff0000;"> <h2>I'm a animated div!</h2></div>
Is there a way to prevent this?
i've find the answear in the css of another div beside of them.
Adding: overflow: hidden; solved that blinking ;-)
Thanks a lot!
Related
I am having trouble making a div change background colour when text is hovered.
I am using an absolute position for the div.book with an absolute value of text over it so the text hovers over the div, text on z-index 3 and div on 2.
When I hover the div the whole background changes, however the text is covering most the div and when its hovered nothing changes so I tried:
h1:hover + div.book {
background-color: rgba(333, 33, 33, 1);
}
.book {
height: 50px;
}
<h1>Book</h1>
<div class="book"></div>
But I can't seem to get it to work?
Any Ideas?
Thanks in advance!
Place the h1 inside the <div></div>. The 2 elements will now overlap eachother. Add width to .book. And finally set the color (=textcolor) transparent so no letters will be displayed.
h1:hover {
background: red;
color: rgba(0, 0, 0, 0);
}
.book {
height: 50px;
width: 200px;
}
<div class="book">
<h1>Book</h1>
</div>
h1:hover + div.book {
background-color: rgba(333, 33, 33, 1);
}
.book{ position: absolute; z-index: 2; background-color:rgba(333,33,33, 0.6);width: 230px; height: 60px; border-radius:40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px;-webkit-border-radius:40px 40px 40px 40px; border:1px solid #999;}
div.book:hover{background-color:rgba(333,33,33, 1);}
h1 {font-family: 'tahoma', cursive; color:#FFF;font-size:48px; text-shadow:3px 3px #000; position:absolute; z-index:3;}
<div class="welcome">
<center><h1>Book</h1></center>
<div class="book">
</div>
</div>
I'm using bootstrap to make some buttons containing images.
But when I click them, a strange horizontal line appears, as well as a dotted bounding box on FF.
i have tried outline: none;,but it doesn't change anything...
how can i re-arrange the html (or edit the css) to fix this? I don't want those boxes (especially the horizontal one in the middle)
thanks
html
<div class="button frontbutton col-md-4">
<a href="/tips">
<img src="url.png" class="buttonPic">
<span data-i18n="buttons.tips">Tips</span>
</a>
</div>
css
.frontbutton {
padding: 15px;
}
.button {
display: inline-block;
color: #444;
border: 1px solid #CCC;
background: rgba(210, 210, 210, 0.62);
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
margin: 0px;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
a {
color: #199ACE;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img.buttonPic {
width: 95%;
}
thanks
https://jsfiddle.net/pLkyqz0x/
UPDATE
while making the fiddle, i noticed what caused the gray bar (box shadow on a:active)
but the red box on FF remains....
This is the a:focus { } style. So you can remove it by setting a:focus { outline: none; } however this is not considered best practice as the focus style is an accessibility requirement. You should instead redefine focus styles that work for you. (For further reading on why this is bad practice: http://www.outlinenone.com/)
I have following CSS:
.bckgrnd_150 {
background: rgba(0, 0, 0, 0.5);
width: 150px;
height: 100px;
transition-duration: 2s;
}
.bckgrnd_150:hover {
background: rgba(255, 255, 255, 0.98);
}
.bckgrnd_150 .wp {
color: white;
}
.bckgrnd_150 .wp:hover {
color: black;
}
Since I'm a begginer in this class, I need help. I would like to use whole code (upper) and apply it to one or simplier: When I hover over .bckgrnd_150 class (styled box as background) it will apply for everything inside the div.
There's HTML:
<div class="bckgrnd_150">
<img alt="" src="http://files.tado-hamann.webnode.com/200001010-bd155be2cb/appbar.download.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 25px; height: 25px;">
<p class="wp">blahblah</p>
</div>
So as you can see (http://jsfiddle.net/5d4yyp9p/) hovering over a box works, but don't affect the .bckgrnd_150 .wp class (text).
I would like to help; when I hover over a box, it will also affect text :hover (because I now need to hover over text to affect him).
I'm really sorry, I'm NEW. :)
You could just use:
.bckgrnd_150:hover .wp {
color: black;
}
Instead of
.bckgrnd_150 .wp:hover {
color: black;
}
As by hovering the parent, it will apply on the child elements also.
jsFiddle here.
Trying to style the error output on jquery.validate and I am not getting any success using Pseudo-elements in the css. Anyone ever have any success styling an error box with an arrow on the top with jquery.validate? Can get the box with the with arrow on top using normal CSS but not with jquery.validate?.
Used http://cssarrowplease.com/ to get the CSS (code below). Thanks
<style type="text/css">
label.error {
float: none;
color: red;
padding: .8em;
vertical-align:middle;
font-size:12px;
display: inline;
font-style:normal;
border: solid 1px #ccc;
border-radius: 4px;
background: #f8f8f8;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
}
label.error:after, label.error:before {
bottom: 100%;
left: 30%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
label.error:after {
border-color: rgba(248, 248, 248, 0);
border-bottom-color: #f8f8f8;
border-width: 8px;
margin-left: -8px;
}
label.error:before {
border-color: rgba(204, 204, 204, 0);
border-bottom-color: #ccc;
border-width: 9px;
margin-left: -9px;
}
</style>
The reason your code is failing is because your trying to apply it to a <label> element.
The code you've linked to is applying the sample CSS to a <div> element, which is nothing like a <label>.
Use the errorElement option to force the jQuery Validate plugin to use <div> elements instead of label.
$('#myform').validate({
// your other options, rules, and callbacks
errorElement: 'div'
});
Don't forget to change label.error into div.error in all of your CSS rules.
You're going to need the specificity of div.error because the plugin also applies the error class to the input elements.
EDIT:
Since, by your own admission, you're "not an expert in CSS", why reinvent the wheel? You can easily combine jQuery Validate with a tooltip plugin, like Tooltipster, where all the difficult CSS tooltips are provided for you. See this question/answer and this demo.
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }