html,
<div id="first">
<a>Come here</a>
</div>
<div id=second">
second div
</div>
css,
#first a:hover{
color:green;
/*i want to do this when hover */
#second{
background:green;
}
}
in here, if the user cursor goes to "come here", i want to change the other element #second's background color.
Is this possible using only css? or do i have to use jquery or javascript event?
#first:hover + #second{
background: green;
}
http://jsfiddle.net/DerekL/8rJmC/
Use ~ if #second is not directly after #first.
Notice that it is impossible to attach the :hover event to a directly using only CSS. The code above attaches it onto #first.
You can do it this way with jQuery if you really have to attach it to a:
$("#first > a").hover(function(){
$("#second").css(...);
}, ....);
Related
Good Afternoon,
I need a little help if possible...
As the title explains, when you hover over a div, i want multiple other divs styles to be changed (different colours at the min). i have currently tried using just pure CSS but finding it quite a struggle. My JSFiddle
As you can see on my JSFiddle, when you hover over the 'red' box, the boxes at either side changes colour to yellow, if you hover over the 'Green' box, it changes colour to yellow, however, if you over over the 'pink' box it changes colour to cyan but also the far left box changes to yellow, which i dont want to happen.
Could anybody help out? I dont mind if i have to use JQuery/Javascript thats not an issue, i just attempted using CSS as i have no knowledge of JQuery/Javascript.
Thank you and i hope it makes sense what i am trying to achieve.
CSS
img{width:100%;}
#container{width:100%; float:left;}
.maintest{width:20%; height:150px; background:red; float:left;}
.maintest:hover{background:#f2f2f2;}
.maintest2{width:20%; height:150px; background:green; float:left;}
.maintest2:hover{background:magenta;}
.maintest3{width:20%; height:150px; background:pink; float:left;}
.maintest3:hover{background:cyan;}
#container:hover .maintest2{background:yellow; border-right:solid 1px black;}
.maintest:hover ~ .maintest3{background:yellow}
HTML
<div id="container">
<a href="#" class="maintest2">
</a>
<a class="maintest" href="#"></a>
</div>
This rule #container:hover .maintest2 {} is causing the behavior you don't want. But this is also giving you the desired behavior of having the "when I hover over red, it changes the other 2 boxes to yellow.
Like the commenters said, this doesn't look possible without using JS.
Quick jquery to do it:
$(".maintest2, .maintest3").hover(function(){
$(this).addClass("yellow-background");
}, function(){
$(this).removeClass("yellow-background");
});
$(".maintest").hover(function(){
$(".maintest2, .maintest3").addClass("yellow-background");
}, function(){
$(".maintest2, .maintest3").removeClass("yellow-background");
});
Documentation on hover event: https://api.jquery.com/hover/
Since you don't mind using jQuery, I will give you a jQuery answer,
$('.box').each(function() {
//this will iterate through each div with class=box
$(this).hover(function() {
//on mouse in
$(this).attr('data-active-box', 'true');
},
function() {
//on mouse out
$(this).attr('data-active-box', 'false');
});
});
.box {
width: 100px;
height: 100px;
display: inline-block;
}
.box[data-active-box='true'] {
background-color: green;
}
.box[data-active-box='false'] {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='box box1' data-active-box='false'></div>
<div class='box box2' data-active-box='false'></div>
<div class='box box3' data-active-box='false'></div>
The js will toggle the data attribute on mouse-in/out. The css will style the div based on the attribute. There's a million ways to do this!
I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?
As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}
Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});
Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);
I have a working example with dragenter and dragleave events that highlight an area where the file should be dropped. This example works correctly.
Right now if I just add a single <span> inside of my dragenter region, highlighting does not work correctly anymore (when you hover the image on top of the text - highlighting disappears). As you see dragleave is called multiple times.
All I changed is substituted Drop files here to <span>Drop files here</span>
Also there is knockout code there, but I believe that it has nothing to do with the bug. I understand that the problem is with event bubbling, but
e.stopPropagation();
e.preventDefault();
return false;
does not help. Any idea how to make it work with dom elements indside?
P.S. this is just a simplified example and it looks like I was not able to properly make it (I was thinking that the only way to solve it through JS, and it appears that the way I described it it is possible to solve it with css as well). Sorry for this confusion. Example looks more like this. Not only the Text is inside of the dropable element, but when you drop something, elements appears there. These elements are clickable.
The problem with Malk's solution is that :after element stays on top of these clickable elements and thus making them unclickable.
It looks like you can attach the handlers to an overlay div that is positioned after and on-top-of the span:
<div class="col-md-12" data-bind="foreach: dropZones">
<div class="drop_zone">
<span>Drop files here</span>
<div class="drop_zone_overlay" data-bind="event:{
dragover: function(data, e){ $root.dragover(e);},
drop: function(data, e){ $root.drop(e, $data);},
dragenter: function(data, e){ $root.dragenter(e, $index());},
dragleave: function(data, e){ $root.dragleave(e, $index());}
}">
</div>
</div>
<ul data-bind="foreach: elements" style="height: 100px">
<li data-bind="text: $data"></li>
</ul>
</div>
CSS
.drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold'Vollkorn';
color: #bbb;
position:relative;
}
.drop_zone_overlay {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
http://jsfiddle.net/rWWK5/
EDIT
Actually you do not need to add another element at all. You can create a pseudo-element with CSS :after that should work to cover the content.
.drop_zone {
...
position:relative;
}
.drop_zone:after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
http://jsfiddle.net/ewng9/
EDIT 2
You can use this technique to cover the contents only when dragging. You just need to change your .css({}) call to toggleClass() and put the :after on the new class.
http://jsfiddle.net/dKsmw/
This will also lets you create an overlay that tints the background elements:
.drop_zone_hover:after{
...
background-color:#0f0;
opacity:0.6;
}
I think Malk's answer is valid. Using an overlay or mask to sit above the drop zone and it's children when you drag over and drop. This prevents the issue you were experiencing with the span
I've created a working Fiddle with your newest example.
I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?
OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.
Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}
As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.
I wonder if someone can help me find a solution to an effect hover to an image in my blog.
The idea was when I hover an image, you see a div with the image information, link project name, date,...
What i have done is, assign two classes do the div information, class show and class hide, and at the beginning it apears with a class hide.
Then with jQuery/JavaScript when the img:hover it remove the class hide and add a class show.
the problem is, when i do hover to a image, appears the information of all images.
I am wonder if some can help me to make just appear the information of the image that the mouse are hover.
My HTML:
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
Read More
</div>
</div>
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
Read More
</div>
</div>
My CSS:
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}
/* HOVER EFFECT */
.hide {
display: none;
}
.show {
display: block;
}
My JavaScript:
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});
And by the way, if some one can tell me, how to hide the information again when the image is not hover, I appreciate to.
What about something simpler:
$("div.content > img").hover(function() {
$(this).next(".information").show(); //hover in
}, function() {
$(this).next(".information").hide(); //hover out
});
This way, using jquery .show and .hide you don't need to use the css which you created for the hover effect, since these jquery's functions already take care of the attributes.
If you don't need to support IE7 and lower, you can do this with just CSS using the adjacent sibling combinator selector, no JavaScript required:
img + div.information {
display: none;
}
img:hover + div.information {
display: block;
}
That says: "Hide div.information when it's immediately after an img" but "Show div.information when it's immediately after a hovered img". The latter rule being both later in the CSS and (I think) more specific, it wins when the image is hovered and not when it isn't.
Live example - Works in modern browsers, including IE8 and higher.
the problem is, when i do hover to a image, appears the information of all images.
I believe this is because you're referencing the generic information class, not the id of a single div. Instead, use the adjacent sibling reference to get only the information for the image you're hovering. You could use the :nth-child() selector.
$("#content:nth-child(1)")
Also, you shouldn't have multiple divs with the same id.
$(this).parent().find('.information').addClass("mostrar")
.removeClass("hide");
This will grab the parent of the individual img which is being hovered, search within the parent and find the .information specific to that img.
Try this:
$('img').hover(function(){
$(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');
}, function(){
$(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});
Try this
$('img').hover(function() {
$('.information').addClass("hide")
$(this).next().addClass("mostrar").removeClass("hide");
}, function(){
$('.information').addClass("hide").removeClass("mostrar")
});