I need to show an additional image once the user hovers over button. How would you go around doing this ideally just using CSS.
You can see what I need exactly on the image below, when the users hovers on the brochure button, the view brochure button appears.
with css alone, if you can put an element inside the hovered object, you can do like this:
fiddle here: http://jsfiddle.net/Q67hB/
html:
<div id="one">all the time
<div id="two">only on hovering one</div>
</div>
css:
#two{
display: none;
}
#one:hover #two{
display: block;
}
In CSS
button:hover {
background-image: url(someImage.png);
}
Related
I'm creating a floating sidebar which will display Facebook logo and open a div on click. This div will contain a Facebook like box. When the user clicks the logo again, the div closes.
I managed to get it working, but I need to replace the button with an image (Facebook logo, like I said) and still have the functionality of this script.
How could I achieve this?
Fiddle here: http://jsfiddle.net/h8CNP
Your Javascript is set to toggle based on the click of the id so all you would need to do is replace this:
<button id="show1" data-href="curtir">Click ME!</button>
With this:
<img id="show1" src="whatever.jpg" data-href="curtir" />
Here is a fiddle of it in action: http://jsfiddle.net/LrTqG/
you can apply an image on button using below css code.
button {
border: none;
background: url("http://lorempixel.com/100/50") 0 0;
width: 100px;
height:50px;
}
Here is a Demo
you can do this in several ways, one is to put background image to button like this:
<button id="show1" data-href="curtir" style="width:100px; height:100px; background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png); background-size: 100% 100%;"></button>
or use img element instead of button
or use div with background image that reacts on click... (my favorite because it can be transparent, no borders etc...)
of course, for img and div you would want to change cursor to pointer
style="cursor: pointer;"
Just modify the button to remove the inner text <button id="show1" data-href="curtir"></button> and add something like the following CSS code
#show1 {
background: url('http://placehold.it/100x50') no-repeat;
width: 100px;
height: 50px;
}
You can add borders for hover too!
#show1:hover {
border: 2px solid cyan;
}
And for some effect of pushing the button down:
#show1:active {
background-position: 1px 1px;
}
Updated JSFiddle
how about making using of the "image" input type?
<input type="image" src="http://epicshowdowns.com/wp-content/uploads/2013/12/facebook-icon.png" id="show1" data-href="curtir" value="Click ME!" />
<div id="curtir" class="demo">Lorem ipsum.</div>
http://jsfiddle.net/h8CNP/11/
I have a div "actions" inside a div which is hidden by default. I want it to show when the mouse hovers over the div. How can I do this?
<div class="tile">
<div class="actions">hello</div>
</div>
Use CSS:
.tile:hover > .actions {
display:block;
}
See this fiddle
Handle it by css
.tile:hover .actions{
display:block;
}
I have a problem with my webpage. I placed a button on top of an image inside a scrollable <div></div>, and this <div></div> is inside the <td></td> of the table. The button on top of image has the following CSS styles:
border:none;
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;
Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.
jsFiddle: jsFiddle
The issue that you might be facing is something like positioning. You are position the image position: relative to the div, Not the image. If you wrap the image in a div and then set the position then it will go up too.
However, that is only the issue, try using something like:
<div class="image-div>
<img src="src_to_file.png" alt="photo" />
<button class="button">Button</button>
</div>
You can use this as the css:
.image-div {
position: relative;
}
.button {
position: absolute;
}
Also make sure that .image-div is not the main or parent div, as if it is! The button will float over it, but if the div .image-div is the child, it will slide (scroll).
I have a menu with several div. Every div has a 1px left border. On hover, I change the background of the current div, but as you can see with the following JSFiddle, it's ugly that the previous (grey) border is still visible.
I would like to hide it when I'm on the current selected div. Any ideas?
Fiddle
<div id="main_menu">
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
</div>
To make it more clear, from this:
To this:
Possibly without using any JS.
Change your .menu_item hover css to this:
#main_menu .menu_item:hover {
background-color:#00437f;
cursor:pointer;
position:relative;
left:-1px;
}
and to maintain text at its position update below css:
#main_menu .menu_item:hover .link {
color:#fff;
border:0px;
position:relative;
left:1px;
}
So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.
So i guess my question is, is there a way to make both child divs change when hovering one using css?
I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.
What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)
Thanks in advance
CSS
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}
#parent :hover {
background-color: #0000ff;
}
#child1 {
width:120px;
float:left;
}
child2 {
width:188px;
float:right;
}
HTML (with some other stuff)
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
<div id="parent">
<div id="child1">
<img src="img.jpg">
</div>
<div id="child2">
${item.getinfo2()} <br>
${item.getinfo3()} <br>
</div>
</div>
</a>
</c:forEach>
Code is something like that. Ive been hacking it up for the last while but that was something like what i had before
If the one you're able to hover over is the first, you only need CSS:
.mavehoverable > div:hover, .makehoverable > div:hover + div {
background-color: red;
}
With this HTML:
<div class="makehoverable">
<div>Child 1</div>
<div>Child 2</div>
</div>
Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.
I think you might just need to fix a line of your CSS. Change:
#parent :hover {
background-color: #0000ff;
}
to:
#parent:hover {
background-color: #0000ff;
}
That seemed to work for me.
Have you tried using jQuery? You could do something like this:
http://jsfiddle.net/UtdYY/
Html:
<div class='color'>
<div class='color child'>test123</div>
<div class='color child'>test456</div>
</div>
Javascript:
$('.color').hover(function(){ $(this).toggleClass('red'); });
CSS:
.red { color:red; }
.child {height: 50px; }
Edit: Cleaned up the javascript, thanks elclanrs
Try this http://jsfiddle.net/rsarika/rtGw5/1/