I'm creating an HTML module where I need to display 3 vertically aligned <div> with black border, white background and black font color. Each <div> has a link inside.
I would like to make this: When I move the mouse over that <div>, the background become black, and if the link inside is active, the background of the <div> is black (only of the <div> with the active link inside).
Is that possible? How can I create this? Now, I only have the <div> structure.
Have you tried assigning IDs to each div? You could try something like:
<div id="box1">
Click Here
</div>
<div id="box2">
Click Here
</div>
<div id="box3">
Click Here
</div>
With styling like
#box1 {
width:150px;
height:150px;
background-color:#FFF;
border:2px solid #000;
}
#box1 a {
color:#000;
}
If you want the background to change when you hover over the div, use:
#box1:hover {
background-color:#000;
}
#box1:hover a {
color:#FFF;
}
and if you want it to just do this when you hover over the link do the same as what I just wrote but change #box1:hover to #box1 a:hover
Hope that helps
Related
When hovering cursor over the link, it's like it jumps down or adds extra pixel on the bottom. Looks like a common problem. I've tried solutions I found on this site, but none seem to work.
This is js fiddle
https://jsfiddle.net/srhjv284/
This is html
<div class="wrap">
Item 1 text
Some Other Text
Last Item
</div>
And this is css
.wrap {width:200px;}
.item {
display:block;
margin:2px 0;
padding:4px 8px;
background-color:#fff;
font-family:arial;
font-size:15px;
color:#ba050a;
border:1px solid #ba050a;
text-decoration:none;
transition:0.4s;
}
.item:hover {
color:#fff;
background-color:#ba050a;
}
This is just happening because you have the same border colour and the background colour on hover.
So when you hover, 1px border merge with background and it feels like that space increased.
Please change the border colour or background colour on hover and you will see the difference.
I have to make entire div with another elements inside it clickable.
I do it by writing the dive inside like this:
<a href="#">
<div class="detail padding-lg full-width like-on-post">
<div class="avtar round pull-left">
<span class="user-personal-pic default-user-avtar border circle avtar user-image you-menu ">
<g:if test="${usrHeader?.avatarUrl?.indexOf('no-avatar') ==-1 || usrHeader?.avatarUrl?.length() == 0 || usrHeader?.avatarUrl == null}">
<img src="${usrHeader?.avatarUrl}" width="34" height="34" alt="Avatar" />
</g:if>
</span>
</div>
<div class="detail-container">
<p class="name">${usrHeader?.fullName()}</p>
<p class="footer mouse-over"><g:link controller="connection" action="details">View profile</g:link></p>
</div>
</div>
</a>
For some reason instead putting the entire div to it put each element to different .
How I can I entire to aall div to ?
By default a <a> tag is displayed inline, any inline element is not really affected by padding, so if you want to make a button that is clickable everywhere inside it, make an empty div put the <a> in it and give it display:block; or display:inline-block; then you can add padding to it to expend it, or use width, depends what u need to do, here is a small Example
<div class="btn">Button</div>
a{
display:inline-block;
padding:20px;
text-decoration:none;
color:white;
background:#262626;
font-family:Arial;
transition:all 0.5s;
}
a:hover{
background:#000;
}
Following is an example having a tag inside div and a made to display:block and width and height 100% so whole div is now clickable.
Whole div is clickable
div{
background:green;
height:100px;
border:1px solid blue;
}
a{
background:yellow;
display:block;
width:100%;
height:100%;
}
<div>
google
</div>
To make the div clickable, do
<div onclick="/*Your JavaScript Code*/" style="cursor:pointer;">
This should work for most purposes.
Did you tried to add display:block on a tag on css. Pleas try this one hope it will work
Try like this: Demo
CSS:
a {
display:block;
background-color:yellow;
text-decoration:none;
}
a span {
display:block;
background-color:red;
color:#fff;
}
Set target for <a>
...
Make the parent div relative positioned, and put in it an anchor tag with position:absolute, setting top:0,right:0,bottom:0 and left:0.
I'm trying to add two hover animations to each image in my photo galleries. Basically, when you hover over an image, I'd like for there to be a text that shows up in a black overlay and when you hover over that text, it becomes underlined. Essentially, I'd like it to look something like this: http://i.stack.imgur.com/vAWpd.jpg
I know I have to create a hover element but the fact that I have two create two animations within each other really confuses me. Could anyone give me a few words of guidance?
Thanks!
Rowan
You mean like this?
HTML:
<div id = 'pie' src = 'http://www.pieisgood.org/images/slice.jpg'><p id="pText" style='left:50px; top:50px; position:absolute;'>Text</p></div>
CSS:
#pie
{
width:500px;
height:265px;
background-image:url('http://www.pieisgood.org/images/slice.jpg');
}
#pText
{
display:none;
transform:rotate(60deg);
border:1px solid;
}
#pText:hover
{
text-decoration:underline;
}
#pie:hover > #pText
{
display:block;
}
The text is hidden until you hover over the div with an ID of pie. The > means it will effect the element after it if it is a child of pie. It changes display:none on the paragraph to display:block while you're hovering over the image. #pText:hover means when you hover over the paragraph, text-decoration:underline will underline the text while you're hovering over the paragraph.
I want to show a div when I click on the image, but the div id not staying put when I am not clicking on the image similar to this site http://www.google.com/nexus/ my jsfiddle http://jsfiddle.net/7KJy4/.
please check my code and update if neccessary thanks! My html code contains a simple div and list items displayed as inline. I used element :active for the pop up when i clicked on the image, but when i clicked on the image the div does not hold for the user to click on the nav links.http://jsfiddle.net/7KJy4/
My html
<div id="hover">
<img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-24.png">
<div id="menu">
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
</div>
</div>
my css
*
{
margin:0;
padding:0;
}
#hover
{
width:100px;
height:300px;
}
#hover:active > #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
#menu
{
visibility:hidden;
}
li
{
}
If you want to do it in pure css, you have to use :focus instead of :active and focus on the image:
#hover > img:focus + #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
You will also need to add "tabIndex" to the image so it can receive focus.
DEMO: http://jsfiddle.net/7KJy4/1/
The side-effect of this approch - user can Tab into the image so your menu can be activated by keyboard as well.
If you want to to it on click without above approach you will have to use some JS.
I have done box around text. Now I want to be hover and change the color of the box
background. I am not able to change that when mouse hover. I have also attached the
image with this so you can have idea about. I have done box around text. Now I want to
be hover and change the color of the box background. I am not able to change that
when mouse hover. I have also attached the image with this so you can have idea
about.please check the image and found the social media box , when I hover the mouse
the hover color is not changing.
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
</style>
<div class="ex"><span class="iconfacebook2" aria-hidden="true" data-icon="">
</span></div>
*edited to make the image appear
You can use the :hover selector:
http://www.w3schools.com/cssref/sel_hover.asp
But if you are using images, you can apply CSS Image Sprites:
http://www.w3schools.com/css/css_image_sprites.asp
By the way, if you are developing a website, maybe CSS Image Sprites are a good choice to boost the performance of the website (because it uses only 1 native image for multiple image interactions).
;)
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
div.ex:hover {
background-color:#000;
}
</style>
Create a hover element by taking the same css class div.ex and adding :hover