I like to highlight each box when mouse hover, i'm able to show the effect but the thing is when i hover it the box seem like move/expand a bit to right. So how do i avoid this?
How do i avoid this?
html
<div id="divtargetDay_1__Assigned" class=" divday divfloatpointerleft"></div>
<div id="divtargetDay_2__Assigned" class=" divday divfloatpointerleft"></div>
<div id="divtargetDay_3__Assigned" class=" divday divfloatpointerleft"></div>
<div id="divtargetDay_4__Assigned" class=" divday divfloatpointerleft"></div>
<div id="divtargetDay_5__Assigned" class=" divday divfloatpointerleft"></div>
<div id="divtargetDay_6__Assigned" class=" divday divfloatpointerleft"></div>
css
.divborderhighlight {
border:1px solid red;
}
.divfloatpointerleft {
cursor:pointer;
float:left;
}
.divday {
width: 56px !important;
height: 56px !important;
margin-right:4px;
}
JS
function dayHover(index) {
labels[index].hover(function () {
$(this).addClass('divborderhighlight');
}, function () {
$(this).removeClass('divborderhighlight');
});
}
The problem is this:
.divborderhighlight {
border: 1px solid red;
}
When this is added to a div without a border, it increases its total width by 2px (1px for the border on each side)
There are a few solutions. One is to add a transparent border to every non-highlighted div like so:
.divfloatpointerleft {
cursor: pointer;
float: left;
border: 1px solid transparent;
}
Now when the red border is added, it doesn't add any width, because the width was already there in the form of a transparent border. This solution is ideal for when you want to add your highlight while preserving the original content without any overlay.
Another solution is to use the outline property instead of border on mouseover:
.divborderhighlight {
outline: 1px solid red;
}
This works just like the border property but as an overlay that adds no width or height to the element. The downside to this is that it conceals 1px along the perimeter of the element.
use outline instead of border:
.divborderhighlight {
outline:1px solid red;
}
outline doc
Outlines do not take up space.
http://jsfiddle.net/XCtQB/
Use CSS to specify the hover behavior:
divday:hover {
border:1px solid red;
}
Then use outline instead of border:
.divday:hover {
outline:1px solid red;
}
Another solution is to use a transparent border in the default state, solidifying / colouring it in hover state.
.divday {
border:1px solid transparent;
}
.divday:hover {
border:1px solid red;
}
Running Demo
add a transparent border :
.divday {
width: 56px !important;
height: 56px !important;
margin-right:4px;
border: 1px solid transparent;
}
Related
I am trying to make a div display when hovering over an a tag. I also want the div to not disappear when the mouse moves onto the displayed div. Although I want the div to disappear when you aren't hovering on the a tag text or the div itself.
This is being specifically used for a navigation bar that can display content on one of the tabs when hovering over it.
I have tried using the .div-name + .div-name2 {} method, but since I have content between these two divs, this solution does not work.
If there is a better way of doing this e.g. through some sort of bootstrap mechanic, that would be great to know as well as I am sure I am over-complicating this using javascript and jquery. Otherwise helping me with the javascript/jquery would be greatly appreciated.
$(".hover-btn").mouseenter(function() {
$(".hover-btn-section").stop().fadeIn(500);
});
$(".hover-btn").mouseleave(function() {
$(".hover-btn-section").stop().delay(500).fadeOut(500);
});
$(".hover-btn-section").mouseenter(function() {
$(".hover-btn-section").stop();
});
.hover-btn {
border: 1px solid red;
}
.hover-btn-section {
display: none;
width: 100%;
border: 1px solid green;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='hover-btn'>hover-btn</a>
<a href="#" class='link2'>link2</a>
<div class="hover-btn-section">
<p>Testing Area</p>
</div>
What you describe can be achieved using CSS only. Instead of the adjacent sibling selector + use the sibling selector ~:
.hover-btn {
border: 1px solid red;
}
.hover-btn:hover ~ .hover-btn-section {
opacity: 1;
pointer-events: all;
}
.hover-btn-section {
opacity: 0;
width: 100%;
border: 1px solid green;
background-color: yellow;
pointer-events: none;
transition: opacity .3s ease-in-out;
}
.hover-btn-section:hover {
opacity: 1;
pointer-events: all;
}
hover-btn
link2
<div class="hover-btn-section">
<p>Testing Area</p>
</div>
LoL, the title has even confused me a little xD Apologies.
I have a fixed element div where once you scroll over it, it follows, simple no problem there.
Now, I'd like to add a simple border to the .div once the div.class is activated by javascript.
Here is an example : http://jsfiddle.net/2ds2y/
once .main.fixed is activated I'd like to add border-bottom: 2px solid #ddd; to the .main div.
I've been reading around but I haven't been able to make this work, I tried the following.
.main.fixed:active ~ .main {
border-bottom: 2px solid #ddd;
}
Just add a border rule to your CSS fixed class:
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid red;
}
jsFiddle example
When the class is applied and the div is fixed, the border will be added.
Ya friend simply add this line to the bottom of the CSS which is applied on .main.fixed
border-bottom: 2px solid #ddd;
like this
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid #ddd;
}
Fiddle
I want my textbox to have a #96f226 border at input:focus, and it works. But if you click away and click back in, it doesn't have that green border anymore.
CSS:
#input {
background: #4a4a4a;
border: 1px solid #454545;
color: #96f226;
}
#input:hover {
background: #656565;
}
#input:focus {
outline: none;
border: 1px solid #96f226
}
HTML:
<input type='text' id='input'>
Edit:
It only doesn't do it if you click in, start typing, click out, and then click in.
The reason this is happening is because your jQuery is adding an inline-style to the input in line 9:
$('#input').css('border', '1px solid #454545');
Inline-styles override styles defined within the stylesheet.
A quick fix would be to add !important to your CSS:
#input:focus {
outline: none;
border: 1px solid #96f226 !important;
}
That works, but it's more of a hack.
If I understand correctly, you're adding the inline-style to remove the red border after an error. A better way to do this would be to simply remove the inline-style. That would sort out the conflict and you wouldn't need to add the !important hack. Replace line 9 in your jQuery with the following:
$('#input').css('border', '');
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />
As you can see in following code, background not changes, but border changes.
The problem is with default background value.
How to solve this problem?!
jquery:
$(document).ready(function() {
$('input').bind('focus blur', function() {
$(this).toggleClass('focus');
});
});
CSS:
input{background-color: blue;}
focus{background-color: red; border: 1px solid blue}
HTML:
<input>
The background defined on input is applied to the tag because of its priority. focus is a class, while input is a tag.
Try setting :
input{
background-color: blue;
}
.focus{
background-color: red; !important
border: 1px solid blue;
}
try write:
background-color: red !important;
instead:
background-color: red;
Also you can write this without jquery. Why you don't write following:
input{background-color: blue;}
input:focus{background-color: red; border: 1px solid blue}
The css is incorrect. dot is missing for focus.
input{background-color: blue;}
.focus{background-color: red !important; border: 1px solid blue;}