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;}
Related
CSS styles defined later should have greater priority (if the selectors are have the same strength).
For instance:
/* Let's make it red */
h1 {
color: red;
}
/* Well... actually blue */
h1 {
color: blue;
}
<h1>Hello World</h1>
I was expecting the same thing to happen for input:valid and input:invalid, but it seems like input:valid is stronger than input.is-valid (a custom class defined later).
Here is an example:
$("button").click(function () {
$("input").addClass("is-invalid")
})
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid green;
}
.is-invalid {
/* Without adding !important, this isn't applied */
border: 2px solid orange !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required>
<button>Run custom validation and declare it .is-invalid</button>
So, if we do not add !important to the .is-invalid class, input:valid and input:invalid will still have greater priority.
How should I address this? Is it a browser bug/feature?
It's about the priority of the selectors: .is-invalid will be more important than input:valid.
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 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;
}
I am having trouble working with the css and javascript for this... I have several <div> with class="item". What I want to do is change the outline of thie that triggered the action on hover.
I have this CSS:
.item {
width: 118px;
height: 98px;
float: left;
margin: 2px;
background-color: #FFF;
outline: 3px solid transparent;
}
and this javascript which i found from google
$('.item').hover( function() {
$(this).css('outline', '3px solid blue');
},
function() {
$(this).css('outline', '3px solid transparent');
});
Please help me with this...
.item:HOVER {
width: 118px;
height: 98px;
float: left;
margin: 2px;
background-color: #FFF;
outline: 3px solid blue;
}
try this...
As mentioned above, that should work fine. Additionally, you could do this without any jQuery or Javascript, with simple css:
.item:hover
{
outline: 3px solid blue;
}
http://jsfiddle.net/W4eYQ/
I don't see why you are using jquery when this can be achieved using just CSS:
Using :hover css selector :-
.item:hover{
outline-color: blue;
}
If you want the solution using jQuery only then you might be missing the following things to do: (as mentioned by johny in above comments)
wrap the code in $(function(){/*code here*/})
use .on() to attach a event. (if the element is added dynamically)
$(function(){
$('.item').on('hover', function() {
$(this).css('outline', '3px solid blue');
},
function() {
$(this).css('outline', '3px solid transparent');
});
});
I would suggest you use jquery's selectable $(".item-list'").selectable(); instead of re-inventing the wheel.
Like this
script
$(function(){
$('.item').hover(
function(){
$(this).addClass('hovered');
},
function(){
$(this).removeClass('hovered');
}
);
});
Try this css this will work fine
.item:hover {
outline: 3px solid blue;
}