Is there a method of using conditionals to apply a style to my input when it is hovered and not active?
use case:
Unhovered: Background = white (or no style applied)
Hovered and not active: Background = lightgrey
Hovered and is active: Background = white (or no style applied)
I was thinking of the various attributes of an input that are available within Angular such as dirty, touched etc..., but I am not sure of how to use them to this effect?
Any pointers would be great.
Here is a stackblitz with the example html
// This can be used by [ngClass]
.grey {
background: lightgrey;
}
input:hover {
background: lightgrey
}
<form [formGroup]="myForm" (submit)=submit()>
<input formControlName="myInput" type="text">
</form>
Use :not property, this working snippet might helpful to you.
.test:hover:not(:focus)
{
background: #D3D3D3;
}
<input type="text" class="test" />
You can use the :not() pseudo-class
pre {
background: white;
}
pre:hover:not(:active) {
background: lightgrey;
}
<pre>
Unhovered: Background = white (or no style applied)
Hovered and not active: Background = lightgrey
Hovered and is active: Background = white (or no style applied)
</pre>
Use focus and hover pseudo code.
input:hover {
background-color: lightgray;
}
input:focus:hover {
background: white;
}
<input type="text">
Related
I have some dynamic user generated divs.
I'm trying to create a function so when the user hovers on one of the divs it highlights while the other divs get blurred.
Therefore I need to figure out how (if possible) I can change the hovered div with one style while changing all the others with another style.
The generated divs are simply spawn through php as a simple div looking like this:
<div class="usercontainer" id="usercontainer"> </div>
I have tried something like this to change the div the user hovers on. But I can't figure out how I at the same time can change all the others.
Do I need javascript for it? or can it be done with css alone?
.usercontainer:hover
{
background-color: red;
opacity: 1.0;
}
I am sharing with css approach only, though you can do it by adding a class at parent with javascript.
Disadvantage of this approach is you have to use !important to override child styles.
.children {
display: inline-block;
height: 100px;
width: 100px;
background-color: grey;
color: red;
font-size: 50px;
border: solid 1px yellow;
}
.parent:hover .children {
opacity: 0.2;
}
.children:hover {
opacity: 1 !important;
}
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>
I am currently trying this logic:
$('input').on('click focusin', function() {
$('.required').hide();
});
But it doesn't seem to be working at all..
This is what the mark-up looks like:
<input type="text" name="Library" id="Library" placeholder="Email Address (again for verification)" data-name="E-mail Address Verification" class="required"/>
the CSS, basically I just want to hide this background image, rather background display none in jQuery / css chaining. or display none to the entire required field... but neither ideologies seem to work.
.field_holder .required {
background: url("../images/required_field_star_bg.png") no-repeat;
background-position: 11px 11px;
}
There is a psuedo class in CSS labelled :focus (as well as a :required and :valid) that allows you to change values for input elements that are in focus.
I have also amended your JavaScript, the issue is that the event you are looking for is simply called focus - you don't even need the click event for this! A focus is always 'into' the element anyhow.
Heres the code:
$('input').on('focus', function() {
$(this).css('border','1px solid red');
});
input:required {
background: url("http://placehold.it/200x200") no-repeat 50% 50%;
}
input:required:focus {
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" name="Library" id="Library" placeholder="Name" required />
You don't need javascript/jquery for this, you could do it with pure css by using the :focus pseudo-class:
.field_holder .required {
background: url("../images/required_field_star_bg.png") no-repeat;
background-position: 11px 11px;
}
.field_holder .required:focus {
background-image: none;
}
I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. I'm setting the attribute's style to "display:none" in the CSS file. Then I set it to "display:inline" in javascript when someone checks a box. The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible.
If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. I don't see why this would work one way but not the other.
I'm using chrome. Here is the code. Any feedback is appreciated.
CSS file:
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
HTML:
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
JAVASCRIPT (from command line, or onchange of a checkbox)
tab = document.getElementById('tab1');
tab.style.display = 'inline';
UPDATE: I know that I could just move the "display: none" out of the css and have it set to none on page load with javascript. But if I do it that way, it will be hiding them after page load, which means, on slower computers, the user could see them flash briefly into visibility. That's why I'm using css to set the initial state, then trying to override it when the box is checked or unchecked.
UPDATE 2: Let me emphasize that if I set the element to visible in css, then hide it on change of the check box, this code works fine. But if the element is initially set to invisible in css, the checkbox is not able to make the element visible. So it appears to be a problem where css "display: none" can't be overridden after page load, but css "display: inline" can.
Your CSS is hiding an a element within the tab, not the tab itself:
#tabmenu li[status='disabled'] a {
}
Changing the tab's style won't undo that.
If your CSS was instead:
#tabmenu li[status='disabled'], a.active, #disabled {
...
}
then changing the display would be useful.
You've set the a element inside the li to be hidden, so setting the tab to be visible isn't enough. Setting the container (the li) visible won't make the content (the a) visible.
You probably want to change your rule to
#tabmenu li[status='disabled'], a.active, #disabled {
CSS targets <a> tags hidden, javascript is changing an <li>, the child <a> would still be hidden
you should have function that will check state of a checkbox I've added it to markup
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'>some text</li>
</ul>
<label>
<input type="checkbox" id="check"/>show text
</label>
Then next code will check the state of your checkbox and will change visibility of tab
$(function () { //document ready
$('#check').click(display); //onclick checkbox display() will be performed, do not use onchange as you'll get in troubles with IE
function display(){
tab=document.getElementById('tab1');
checkbox=document.getElementById('check')
if (check.checked){
tab.style.display = 'inline';
}
else{
tab.style.display='none';
}
console.log(tab.style.display)
}
});
Or try to play here http://jsfiddle.net/766Nb/
P.s: on jsfiddle I've cleaned up css a bit
For hidde element li you need tab.style.display='none'; and for show element li you need tab.style.display='list-item';.
Then the necessary code it's this:
JAVASCRIPT
function llm()
{
tab = document.getElementById('tab1');
if (document.getElementById('Check1').checked==false)
{
tab.style.display = 'none';
}
else
{
tab.style.display='list-item';
}
}
HTML
<input type="checkbox" id="Check1" name="vehicle" value="Car" onclick="LLM();"> Checked
<ul id="tabmenu">
<li name='tab' id='tab1' selected='no' status='disabled'></li>
</ul>
CSS
#tabmenu li[status='disabled'] a, a.active, #disabled {
color: #777777;
background: #DDDDDD;
font: normal 1em Arial;
border: 1px solid black;
border-radius: inherit;
padding: 0px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand;
display:none;
}
I think it's not possible to do only with css. If you need more help notify me.
Look this way, maybe you can solve your problem using these steps:
Create a .visible class on the css with this code:
.visible {
display: inline !important;
}
And create another class .hidden:
.hidden {
display: none !important;
}
And then, use this code to Hide your element:
tab = document.getElementById('tab1');
tab.className = 'hidden';
And this code to Show your element:
tab = document.getElementById('tab1');
tab.className = 'visible';
Important: with this solution you can start with display:none on the CSS without having problems to set visible after, because the !important tag on the classes overwrite all, so you will not have problem to hide it.
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.
I'm using jQuery to addClass to a hovered over div...but the background color won't change. I'm guessing it's because it has previously been assigned a background-color in CSS? Other properties (border) on the hover class appear when hovering so addClass is working.
How can/should I make this work?
jQuery
$('.pick1-box').hover(
-> $(this).addClass('hover')
-> $(this).removeClass('hover')
)
CSS
.pick1-box, .pick2-box {
...
background: #eee;
...
}
.hover {
background-color: yellow;
border: 1px solid red;
}
html
...
<li class='nominee clearfix' id='146'>
<div class='candidate'>
<img alt="Enders" height="80" src="/assets/25803sm.jpg" />
Dick Waddington
</div>
<div class='pick-boxes'>
<div class='pick1-box'>
1
</div>
<div class='pick2-box'>
2
</div>
</div>
</li>
...
It depends how you're loading jquery and code but try this:
.hover {
background-color: yellow !important;
border: 1px solid red;
}
You can try re-ordering or adding an important to your CSS, or you could do something like:
$('.pick1-box').hover($(this).attr('style', 'background-color: yellow;border: 1px solid red;'),$(this).removeAttr('style'));
since element styles take precedence.
The problem, as you've stated, is because the style has been overridden in the style attribute of the element being affected. You have a couple of options:
Don't change the element's css directly.
Use !important on the settings you absolutely need to override element styles.
Change the element's css directly, but remove them once you're done with them.
You could make the 2nd rule more specific:
.pick1-box.hover, .pick2-box.hover {
background-color: yellow;
border: 1px solid red;
}
css specificity
This assumes that your .hover css actually occurs prior to the .pick1-box rule as these have equal specificity, the one which occurs later will have precedence.