I try to do hover on other tag element when mouse over on a element. but its not working, it is working when both elements are in same div tag.
html
<div id="wrap">
<div id="wrap1">
<div class="a" id='aa'>AAAA</div>
</div>
<div id="wrap2">
<div class ="b" id='bb'>BBBB</div>
</div>
</div>
css
.a {
color: red;
}
.b {
color: orange;
}
#aa:hover ~ #bb {
background-color: blue;
}
*Note:*I don't want to use jQuery.
This cannot be done in pure CSS, you will have to write some JS.
I suggest using jQuery since it makes these kinds of manipulations very easy e.g. in your case:
$('#aa').hover(
function() {
$('#bb').css('background-color','blue')
},
function() {
$('#bb').css('background-color','')
}
)
Demo: http://jsfiddle.net/9nN6W/
With a little more effort same can be done in plain vanilla JS as well, but why invent the wheel.
If you want to do this in pure CSS, elements have to be accessable via CSS, for example you can target the "wrap" DIVs:
#wrap1:hover ~ #wrap2 {
background-color: blue;
}
Demo : http://jsfiddle.net/9nN6W/1
By popular requests: Pure JS solution
document.getElementById('aa').addEventListener('mouseenter',
function() {
document.getElementById('bb').style.backgroundColor = 'blue';
}
)
document.getElementById('aa').addEventListener('mouseleave',
function() {
document.getElementById('bb').style.backgroundColor = '';
}
)
Demo 3: http://jsfiddle.net/9nN6W/2/
Javascript it is then :-)
document.getElementById("aa").onmouseover=function(){
document.getElementById("bb").style.backgroundColor="blue";
};
document.getElementById("aa").onmouseout=function(){
document.getElementById("bb").style.backgroundColor="";
};
Related
I have a block which has some data attributes:
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Now I want to use javascript for changing text color on mouseenter and mouseover using my data attributes.
So I have:
$(".my-div").each(function() {
$(this).mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function() {
$(this).css('color', this.dataset.color);
});
});
If I have one div, it's working fine, but if I have another divs with the same class, and I mouseenter and mouseover one div, another divs react too.
What should I do to make it working right, maybe add an index, I don't know.
Can you help me, please?
Thanks in advance. Sorry for my English.
P.S. Don't advise css, for this I must use javascript.
Your code should work by itself but you don't need to loop through each div to check if the mouse has entered or left each div element - it's extremely inefficient.
So remove:
$(".my-div").each(function() {});
Your new code should look like the following:
$(".my-div").mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(".my-div").mouseleave(function() {
$(this).css('color', this.dataset.color);
});
.my-div {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
color: #ff4b4b;
border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Obviously the CSS isn't necessary but I have added it to prove that it works correctly.
Get the target element of the event passed into each handler using $(this):
$(".my-div").each(function() {
$(this).mouseenter(function(e) {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function(e) {
$(this).css('color', this.dataset.color);
});
});
.my-div{
font-size: 20px;
line-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="black" data-hover="red">
Text 1
</div>
<div class="my-div" data-color="black" data-hover="green">
Text 2
</div>
<div class="my-div" data-color="black" data-hover="blue">
Text 3
</div>
I am currently trying to add a custom JS function (via the Live Code Editor Plugin) to my wordpress website. The goal is to change the background colour of a toggle after click (i.e. from red -> green). I have tried this function but although the selector works for CSS, the JS function is not working:
CSS:
\23 toggle-id-1 {
background-color: red;
}
JS:
var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");
\23 toggle-id-1.onclick = function(){
\23 toggle-id-1.style.backgroundColor = "green";
}
In JSFiddle this worked without any problems, is there anything different for this plugin?
Thank you!
jQuery solution:
$("#toggle-id-1").click(function () {
$(this).toggleClass("green");
});
#toggle-id-1 {
background-color: red;
height: 100px;
width: 100px;
}
#toggle-id-1.green { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle-id-1" class=""></div>
You can't have spaces in variable names. Name your variable something else.
I have some containers with ids="container1", "container2", "container3"...
They can have one of two types of tags inside: tables or canvas.
I want to hide one of them depending on the device orientation.
I have tried with this
$('[id^=container]:has(canvas)').hide();
or
$('[id^=container]:has(table)').hide();
but both hide all the containers, don't filtering their inside tags.
You can do
var x = $('[id^=container]').find("table").length;
// Will be 0 if no table inside it
if(x==0) { .. }
else { .. }
You can use classes on your containers instead of ids. Here's a JSFiddle demo.
For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.
Source: https://api.jquery.com/has-selector/
Basically I made a 3 containers. One with a table, one with a canvas and one with nothing.
<div class="container green">
<table></table>
</div>
<div class="container blue">
<canvas></canvas>
</div>
<div class="container red"></div>
And a quick CSS to have the divs visible.
div.container{
display: inline-block;
height: 50px;
margin: 10px;
width: 50px;
}
div.green{
background-color: green;
}
div.blue{
background-color: blue;
}
div.red{
background-color: red;
}
And to complete it, a jQuery that executes when the document is ready.
$(document).ready(function(){
$('div.container').has('canvas').hide();
});
If you know the element by which you want to grab the container is not nested within additional tags, you can use the parentNode property of an HTML element to climb up the DOM tree and hide the parent.
document.querySelector("[id^=container] > table").parentNode.style.display= "none";
Example that demos the concept:
document.getElementById("input").addEventListener("change", function() {
document.getElementById("container1").style.display = "block";
document.getElementById("container2").style.display = "block";
document.querySelector("[id^=container] > " + this.value).parentNode.style.display = "none";
});
#container1 {
border: 1px solid red;
}
#container2 {
border: 1px solid blue;
}
<select id="input">
<options>
<option value="table">Hide the table</option>
<option value="canvas">Hide the canvas</option>
</options>
</select>
<div id="container1">Table
<table></table>
</div>
<div id="container2">Canvas
<canvas></canvas>
</div>
I didn't realized I had a global container with id= "container*".
What a silly mistake. Sorry for stealing your time, and thank you everyone!
HTML code:
<div class="content">
<textarea> hello.png </textarea>
</div>
<div class="content-btn">
Click me
</div>
Javascript code:
$(".button").click(function() {
if ($(this).parent().previousSibling('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().previousSibling('.content').show();
}else {
$('.content').hide();
}
});
How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys
https://jsfiddle.net/uway5hhg/8/
As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea
http://codepen.io/anon/pen/JYoMRK
<div class="content" id="text">
<textarea> hello.png </textarea><br />
Close
</div>
<div class="content-btn">
Open
</div>
CSS
#text {
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 0s 999999s;
}
#text:target {
opacity: 1;
height: auto;
transition-delay: 0s;
}
#text:target ~ div a.button { display: none; }
Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)
https://jsfiddle.net/uway5hhg/39/
$(".button").click(function() {
var content = $(this).parent().prev('.content');
content.toggle();
});
As far as I know there is no way to catch previous sibling in CSS.
But it works with jQuery, here is your slightly changed code:
$(".button").on('click', function() {
var ele = $(this),
par = ele.parent(),
sbl = par.prev();
if (sbl.css('display') == 'none'){
$('.content').hide();
sbl.show();
}else {
$('.content').hide();
}
});
Working example is here: https://jsfiddle.net/y0ab3n0L/
That should do it's job
JS:
$(".button").click(function() {
var contentBtn = $(this).parent(".content-btn");
var content = $(contentBtn).prev(".content");
var textarea = $(content).find("textarea");
$(textarea).toggle();
});
or event shorter:
$(".button").click(function() {
$(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});
https://jsfiddle.net/uway5hhg/21/
Hope this helps :)
Solution provided by Fabrizio is a good one if you want no javascript.
However you can also modify the DOM to have a similar effect.
<div class="content-wrapper">
<div class="content" id="text">
<textarea>hello.png</textarea>
</div>
Click me
</div>
CSS
.content {
display:none;
}
.content-wrapper:hover .content {
display:block;
}
.content-wrapper:hover .button {
display:none;
}
https://jsfiddle.net/2Lsszgqz/
There is no such CSS pseudo element - a.button:click, so only JS solution will work (without changing your HTML structure). You can also get to close of it using :focus CSS pseudo class. But you will lack to go up one level in CSS and then show the textarea. So, only solution left is using JS.
In your sample JS code you have used .previousSibling('.content') which is native JS, which you are calling on jQuery object, that's why it will not work. jQuery equivalent of this function is .prev('.content')
Correct Syntax would be -
$(".button").click(function() {
if ($(this).parent().prev('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().prev('.content').show();
}else {
$('.content').hide();
}
});
Working Fiddle
How could I make it so that given two elements let's say these boxes:
If I clicked over one, it would grow, and the other would shrink like and vice versa:
How can I do this?
I have seen this sort of done with CSS, using the focus tag and adjusting the width. But I have two problems there, first how could I affect the other element, and second as far as I can tell adjusting width will only stretch them right. I have seen people change the way they float the elements to deal with that, but I don't want to move them around the page to do this.
Here are 2 examples without Javascript/jQuery:
Pure CSS - Trigger on click: (example)
Using the checkbox hack in CSS you can effectively toggle the widths of the elements when the checkbox is :checked. Here is what part of the CSS looks like:
input[type=checkbox]:checked ~ .red {
width:70%;
}
input[type=checkbox]:checked ~ .green {
width:20%;
}
Go to the example for the full CSS.
HTML
<input type="checkbox" id="toggle" />
<div class="red">
<label for="toggle"></label>
</div>
<div class="green">
<label for="toggle"></label>
</div>
You might also be interested in the original example I made. It takes a different approach, though it doesn't fully work.
Pure CSS - Trigger on hover: (example)
Unfortunately, neither the adjacent selector, nor the general sibling selector can select previous elements, therefore it makes this a little difficult. I placed 2 general elements before the main elements in order to somewhat solve this issue.
.greenS:hover, .greenS:hover ~ .green,
.redS:hover, .redS:hover ~ .red {
width:72%;
}
.greenS:hover ~ .redS, .greenS:hover ~ .red,
.redS:hover ~ .greenS, .redS:hover ~ .green {
width:22%;
}
HTML
<div class="redS"></div><div class="greenS"></div>
<div class="red"></div>
<div class="green"></div>
Since this was tagged as JS/jQuery, here are 2 alternative solutions.
JS/jQuery - Trigger on click: (example)
$('.red, .green').click(function(){
$('.red').toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
JS/jQuery - Trigger on hover: (example)
$('.red').hover(function(){
$(this).toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
$('.green').hover(function(){
$(this).toggleClass('expanded')
.prev('.red').toggleClass('contracted');
});
See jQuery .animate() method documentation.
Example on jsfiddle:
.box {
width: 100px;
height: 100px;
display: inline-block;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
$('.box').click(function() {
var currentWidth = $(this).outerWidth(),
siblingCurrentWidth = $(this).siblings('.box').outerWidth();
$(this).animate({'width' : currentWidth/2})
.siblings('.box').animate({'width' : siblingCurrentWidth*2});
});
This is a very simple example with several flaws, but it demonstrates a possibility for what your purpose is.
Simple example http://jsfiddle.net/PeLub/ ( modify how you need) .
<div class="box" id="first"></div>
<div class="box" id="second"></div>
$("#first").click(function(){
$(this).animate({width:'50px'}, 500);
$("#second").animate({width:'150px'}, 500);
});
$("#second").click(function(){
$(this).animate({width:'50px'}, 500);
$("#first").animate({width:'150px'}, 500);
});