I have a div called image. It has a CSS-property visibility:hidden;. I have another button called button.
What I need is when I hover the button, the image changes to visibility:visible;.
Can I do it with CSS or do I have to use JavaScript?
yes you can do this
as like this
HTML
<label for="button">Click here</label>
<input type="checkbox" id="button">
<div class="one">Show my div</div>
Css
label{
background:green;
padding:10px;
}
.one{
width:100px;
display:none;
height:100px;
background:red;
margin-top:20px;
}
input[type="checkbox"]{
visibility:hidden;
}
input[type="checkbox"]:checked ~ .one{
display:block;
}
Live demo
Updated answer
if you want to just hover than check to this *Demo*
Note that this is a javascript / jQuery solution:
$(button).hover(function() {
$('div#image').attr('visibility', 'visible');
}, function() {
$('div#image').attr('visibility', 'hidden');
});
You can only do this if the div is a child of the button - which isn't possible.
It's possible if you make it a child of something else (i.e. not a button, do it differently).
However, what browser? All the main ones? Because if you are willing to use only the most modern it's possible by using sibling selectors.
But for mainstream usage you can only do it if the div is a child of the hover element. Note: You can hover anything, it doesn't have to be a button or a link <a>. So that's what I would do - make a div element that looks like a button, and has a child that you want to change.
You need javascript for that. You can use css if your div is parent for the button, but in your case this is not possible
JS
function changeVisibility(objID) {
var el = document.getElementById(objID);
if(el.style.visibility == 'hidden') {
el.style.visibility = 'visible';
return true;
}
el.style.visibility = 'hidden';
}
HTML
<div id="box">Something to show</div>
<input type="button" class="button" onmouseover="changeVisibility('box')" value="Change visibility" />
Related
HTML:
<div id="addressinfo">
<div>
City and State<br>
<input type = "text" id = "city" name = "city" placeholder="City" required><br>
<div id="autocomplete" hidden></div>
</div>
</div>
CSS:
#addressinfo div{
display:inline-block;
padding-right:50px;
padding-top:10px;
font-family:Verdana,sans-serif;
font-size:12px;
}
jQuery:
$("#autocomplete").prop("hidden",false); //unhide the #autocomplete div
for(var i=0;i<=(count-1);i++){
$("#"+i).click(function(){
$("#city")[0].value = $(this).val();
$("#autocomplete").prop("hidden",true);
});
}
When I remove display:inline-block; from CSS, the #autocomplete div is successfully hidden when the jQuery click event occurs. But when the display propety exists, the div does NOT hide. Why is this?
You cannot use hidden with display - display will usually override hidden. From the HTML Living Standard:
Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.
https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
You can simply use the jQuery $("#autocomplete").hide(). It will set display to none and your problem will be solved.
I have a radio button and I need to add a style to its parent div when the radio button is checked. This I need to do only with css. In the below html, if the radio is checked, i need to apply a color to the div "options"
HTML
<div class="options">
<span class="option_radio">
<input type="radio" name="payMethod" id="payMethod1" value="aaa" >
</span>
<span class="option_image">
<label for="payMethod1">
<img src="abc.png" >
</label>
</span>
</div>
I tried the below approaches but its not coming correctly
.options input[type="radio"]:checked span{
background-color:black;
}
.options input[type="radio"]:checked div.options{
background-color:black;
}
could somebody please help me on this
Sorry, can't do that yet. You can only go down the tree, not up it. You will either need to make the elements you want to style siblings or descendents of the radio button. Ancestor selectors do not yet exist:
http://css-tricks.com/parent-selectors-in-css/
<input type="radio" name="payMethod" id="payMethod1" value="aaa" />
<div class="options">
<span class="option_radio">
</span>
<span class="option_image">
<label for="payMethod1">
<img src="abc.png" />
</label>
</span>
</div>
css
input[type='radio']:checked + div.options {
background-color:green;
}
input[type='radio']:checked + div.options span {
background-color:red;
}
That would require using parent selectors from CSS4 http://www.w3.org/TR/selectors4/ Unfortunately CSS4 is not yet available. So for today it is not possible to do that using pure css.
Javascript is your answer. Provided Vanilla and jQuery examples.
var payMethod = document.querySelector('#payMethod1');
payMethod.onchange = function() {
alert('clicked')
// Get span and div
if(this.checked) {
var elements = document.querySelectorAll('.option_radio, .options');
// Loop elements & add class
for(var i = 0; i < elements.length; i++) {
if (elements[i].classList)
elements[i].classList.add("checked");
else
elements[i].className += ' checked';
}
}
};
//jQuery implementation
$('#payMethod1').change(function() {
if($(this).is(':checked')) {
$('.option_radio, .options').addClass('checked');
}
});
In the example below, I am applying the same rules to submit and button elements, but when rendered, they are behaving differently. The button element behaves as expected; however, the input element is green by default even when there is no hovering, and does not change colour at all on hover. I have set up a JSFiddle here: http://jsfiddle.net/D5WZ5/
CSS:
input[type="submit"],[type="button"]
{
background-color:blue;
}
input[type="submit"],[type="button"]:hover
{
background-color:green;
}
HTML:
<input type="submit" value="Submit" />
<input type="button" value="Button" />
Demo Fiddle
Change your CSS to:
input[type="submit"],[type="button"]{
background-color:blue;
}
input[type="submit"]:hover,[type="button"]:hover{
background-color:green;
}
You hadn't also applied the :hover selector to your input element
I would like to change the border color of tags when the input is focused.
<div class="tags">
<input type="text">
</div>
using JavaScript
<div class="tags" id="tags">
<input type="text" id="text"/>
</div>
JavaScript
var parent = document.getElementById('tags');
var child = document.getElementById('text')
child.onfocus = function(){
parent.style.border="1px solid #f00";
}
child.onblur = function(){
parent.style.border="none";
}
JSFIDDLE
Using jQuery:
$('input[type="text"]').focus(function(){
$(this).parent().is('.tags').css({"border-color":"#F00"});
});
If you wanted to uses classes or tags instead of unique IDs you must consider how you would specifically target the element associated with the focused element.
This example only targets the the "#tags / .tags / tags" element that is a parent of the focused input.
This snippet a flexible way to achieve what it is you're trying to do.
You can give an id to your parent element and another id to your input tag. Then do the following ->
HTML
<div class="tags" id='parent'>
<input type="text" id='input'>
</div>
If you want to listen for any changes related to your input element you can use one of the DOM's native methods .addEventListener ->
Javascript
//getting our input element
var input = document.getElementById('input');
//when the element receives focus
input.addEventListener('focus', function(){
//getting our input element's parent element
parent = input.parentNode;
//then do the following
parent.style.border = '1px solid brown';
},false);
//when the element loses focus
input.addEventListener('blur', function(){
//getting our input element's parent element
parent = input.parentNode;
//then do the following
parent.style.border = '1px solid green';
},false);
CSS
#parent{
width:102px;
height:52px;
border:1px solid green
}
#input{
width:100px;
height:50px;
border:0px solid
}
DEMO
The calendar dropdown in DatePicker is taking the font size of the document rather than the div inside which the DatePicker resides. How do we fix this?
We don't want to apply the font size manually on the Calendar, because our solution is customizable and we want to allow other widgets with dropdowns as well and so we cannot forsee all dropdowns that might be shown.
#datepickerParent
{
font-size:100px;
}
body
{
font-size:15px;
}
<div id="datepickerParent">
<input type="text" id="datepicker" />
</div>
<input type="text" id="dateInput" />
$(function () {
$("#datepicker").datepicker();
$("#dateInput").datepicker();
})
the calendar always takes 15px as its font-size.
Here is the jsfiddle
Apply style to the ui-datepicker class or ui-widget class
.ui-datepicker{
font-size:10px;
}
Fiddle Demo
I think you can use the following code:
.ui-state-default
{
font-size:10px !important;
}