I am wondering if it is possible to change the style of child when its element was hovered, while its css was also styled when its parent was hovered?
To make my question clear, I wrote down a basic code below:
//styling child while mouse is inside child element
$('child').on('hover', function(e){
if (e.type == 'mouseenter'){
$(this).css('background','yellow');
}
})
// styling child while mouse is inside parent
$('child').parents().on('hover', function (e){
if (e.type == 'mouseenter'){
$(this).css('background', 'blue');
}
})
So, basically once user enters space of parent to make child's bg blue, and once it enters space of child to change from blue to yellow bg.
I saw a comment on why I do not use css, so this is a little explanation: I am unable to select parent element. I can only do it from child using parents(). And as long as css does not support parents() method yet I went with jquery. :)
CSS Alone:
div {
padding: 20px;
border: 1px solid black;
}
/* something hovered that have .child as direct child => change .child color to blue */
*:hover > .child {
background-color: blue;
}
/* .child element hovered => override the above color and set it to yellow (note that the above rule is still taking effect when this is taking effect) */
.child:hover {
background-color: yellow;
}
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
is that the behaviour you expect ?
$('#child').parent().on('mouseover', function(e){
if(this===e.target){
$(this).children().css('background','blue');
}else{
$(this).children().css('background','yellow');
}
}).on('mouseout', function(e){
$(this).children().css('background', 'green');
});
#parent{
width:200px;
height:100px;
background-color:#f00;
}
#child{
width:30px;
height:30px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>
Related
Title says it all. I've got child div's with absolute positions inside a relative parent div, and would like to know whether the mouse is over a child or a parent div at a "random" point in time.
Hypothetically, I'd like to call the .mouseover method and perform a .hasclass test on the highest level object to see if it has the child class or not. However, .mouseover is an event handler, thus not something I could just call to get the relevant information.
Example HTML below:
$(document).ready(function() {
$(".child").draggable();
setTimeout(doSomething, 31415);
});
var doSomething = function() {
// Edit content based on what is underneath the mouse
}
.parent {
width: 100%;
height: 1000px;
position: relative;
background: #f0f0f0;
}
.child {
width: 300px;
height: 100px;
position: absolute;
background: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
Getting an element from a position is what the document.elementFromPoint function was designed to do:
document.elementFromPoint(mousePosition.x, mousePosition.y);
To get the current mouse position, attach a listener to mousemove (as far as I know there is no native method to extract mouse coordinates without a mouse event). Here's an example fiddle showing this: https://jsfiddle.net/xsLwt8Ld/
If I understood correctly, you want to know if at any given time, the mouse is over the child or directly over the parent. You could achieve it by using the :hover pseudoclass
Create a function that checks if there is any .child that has the :hover class:
If there is, that means that the mouse is over a .child (and you have the element) and there's no need to check the parent.
If there isn't, then check if there is any .parent element that also has the class that you created:
If there is: the mouse is over a .parent but not over a .child;
If there is not: the mouse i not over a .parent or a .child.
The code to achieve this is simple:
function checkMouseOver() {
if ($(".child:hover").length) {
// mouse over a .child
} else if ($(".parent:hover").length) {
// mouse over a .parent (but not over .child)
} else {
// mouse not over a .parent or .child;
}
}
A simple working demo:
$(".child").draggable();
// Edit content based on what is underneath the mouse
function checkMouseOver() {
if ($(".child:hover").length) {
alert("You were over " + $(".child:hover").text());
} else if ($(".parent:hover").length) {
alert("You were over " + $(".parent:hover").attr("id"));
} else {
alert("You are not over a .parent or .child");
}
}
.parent {
width: 100%;
height: 1000px;
position: relative;
background: #f0f0f0;
}
.child {
width: 300px;
height: 100px;
position: absolute;
background: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button onclick="checkMouseOver()">Check where the mouse is</button>
<div class="parent" id="parent1">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="parent" id="parent2">
<div class="child">Child 3</div>
<div class="child">Child 4</div>
</div>
(Click on the page and press tab until you get into the button, then mouse over the different elements and press Enter to trigger the funtion)
The code:
$('.ask-button').click(function() {
$('.wpcf7-form').hide()
$(this).css('margin-left', 0)
})
I know I can't just do .toggle because in order to restore margin-left I have to include the original value (300px).
What's the simplest way to turn the event above into a toggle?
You can use .toggle() to show hide the element and use .toggleClass() for toggling class with css margin left set to 0:
$('.ask-button').click(function() {
$('.wpcf7-form').toggle()
$(this).toggleClass('marginzero');
});
CSS:
.marginzero{
margin-left:0;
}
HTML
<button class="ask-button">ask</button>
<div class="wpcf7-form">Sample text<div>
js
$('.ask-button').click(function() {
$('.wpcf7-form').toggleClass('wpcf8-form')
})
css
.wpcf7-form{ margin-left:300px; border:1px solid #ddd}
.wpcf8-form{ margin-left:0; border:1px solid #ddd}
use this link define width in class. it works
I am trying to add a class .red to #box-1 on scroll down using following code at this demo.
$(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 30) {
$("#box-1").addClass("red");
} else {
$("#box-1").removeClass("red");
}
});
the HTML:
<div id="box-1" class="row"></div>
<div id="box-2" class="row"></div>
<div id="box-3" class="row"></div>
and CSS:
.red{ background-color: red; }
#box-1{background-color: yellow; height:300px; width:100px;}
#box-2{background-color: green; height:300px; width:100px;}
#box-3{background-color: blue; height:300px; width:100px;}
But it is not working! What am I doing wrong?
Adding !important to the background-color of the red class does the trick.
ids identify elements. classes classify elements. ids have higher specificity and so
their styles have higher precedence.
.red{ background-color: red !important; }
See fiddle : http://jsfiddle.net/2v9fn1np/1/
Using !important is bad practice and usually an indicator that you have not utilized classes and ids effectively. In this case, to add the style, you can edit the style attribute of the element directly and achieve the highest precedence. Use jQuery's css method.
If you haven't noticed, the is getting the CLASS "red".
The problem is that you've referred to it's ID has having a yellow background. And since the ID is predominante over a CLASS, you must add it to the CLASS, EX:
#box-1.red{ background-color: red; }
I have a parent div element, and within it a child div element. Now there is a click handler for the child div, it brings a drop down(like a menu).
Requirement - Is to bring the dropdown on click of the parent div also.
Note - on click of parent div, and firing childdiv.click() won't work, infinite loop.
Cannot do a stoppropagation, functionality for bringing the dropdown won't work.
$(document).ready(function(){
$("#child").click(function(){
$("ul").slideUp();
})
$("#parent").click(function(){
$("#child").trigger("click");
})
})
#parent {
padding: 50px;
background: red;
}
#child {
height: 50px;
background: green;
color: white;
}
li {
background: rgba(0,0,255,0.3);
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">Parent
<div id="child">
Child
<ul id="menu" class="hide">
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
</div>
Try this adding the parent onclick event handler and then use event.stopPropagation to stop event bubbling.
$("#child").click(function(e){
e.stopPropagation();
$("ul").slideToggle();
});
$("#parent").click(function(e){
$("#child").trigger("click");
});
CHECK FIDDLE is this what you want? Not sure what you want to do next. Adding your code would have been much easier to help.
I'm adding elements into a container div whose height is 'auto' initially. I expect its height will be updated as the children elements appended. But, actually not. Could someone help me? I just want the container div height gets updated according to the children's height.
I used chrome debuging tool, the height of container div is less than height of children divs. Children divs are float:left.
If you're adding floated children to a div you need to have overflow:auto; on the parent.
You can also use another element to clear the float clear:both will do this.
This is because floated elements are taken out of the document flow.
Here's an example that shows you a few techniques you can use : http://jsfiddle.net/Tn5c3/
The CSS
#a, #b {
padding: 10px;
margin:10xp
}
#a {
background: #aa0000;
}
#b {
background: #00aa00;
overflow: auto;
}
p {
background: #0000aa;
padding: 5px;
}
.clear {
clear:both;
height: 50px;
}
The JS
$('#bb').click(function() {
addChild($('#b'));
});
$('#ba').click(function() {
addChild($('#a'));
});
function addChild(parent) {
var child = $('<p>floated para</p>').css({
'float': 'left'
});
parent.append(child);
}
The HTML
<button id='ba'>Add to A</button>
<button id='bb'>Add to B</button>
<div id='a'></div>
<div class='clear'></div>
<div id='b'></div>