Actually I want to give hover to div which is inside hyperlink but I don't know how to in css.
These divs actually have background images attached to them in css.
<div class="header_menu">
<div class="foa_logo"><img src="images/FOA-Logo.jpg"/></div>
<div class="address"></div>
<div class="home"></div>
<div class="about"> </div>
<div class="services"></div>
<div class="contact"></div>
</div>
div {
width:100px;
transition: width 2s;
}
div:hover {
width:200px;
}
replace div with .foa_logo if you want to select just that class.
I've created a jsfiddle for you showing how to do the hover you want. I removed the divs in the hyperlinks, because they are not useful. You can simply set the styles for the a tags and then you get your hovers
http://jsfiddle.net/FHWb6/
.header_menu a {
display:block;
height:40px;
width:100px;
line-height:3;
text-align:center;
font-family:Arial;
font-size:14px;
text-transform:uppercase;
float:left;
position:relative;
background:url(); /*put your image here*/
background-color:#CC0;
color:#FFF;
text-decoration:none;
}
.header_menu a:hover {
background:url(); /* put your hover image or position here */
background-color:#ececec;
color:#000;
}
I added some extra code in there just to do some base level styling - color, height and width will most likely change for you.
Try this:
element:hover {
property: value;
}
By this, you can change the CSS properties of the elements when they are hovered over!
So for you, you will try it as:
.home:hover { // on the home div..
// all the changes here
}
Related
I've been trying to code this tumblr page of mine and I'm currently stuck at the links section. I want my sidebar image to change when I'm hovering over my links, the "HOME", "ASK" etc. Is it possible to do this without using javascript? I've googled it but I haven't been able to come up with a solution, having tried adding different image classes, etc. All I've been able to do is have images appear UNDER the links. I've added the sidebar and links code from my page below. Thanks in advance!
#sidebar {
position:fixed;
width:203px;
top:70px;
left:70px;
height:auto;
padding:15px;
background-color:#1c1c1c;
}
#sidebarimg img {
width:203px;
padding-bottom:5px;
}
#links {
width:203px;
height:auto;
margin-left:auto;
margin-right:auto;
font-family:times;
text-align:center;
text-transform:uppercase;
opacity:2;
}
#links a {
margin-top:1px;
margin-bottom:2px;
border:1px solid #fff;
width:98px;
display:inline-block;
color:#999999;
padding-top:5px;
padding-bottom:5px;
font-size: 13px;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;
}
#links a:hover {
background:#fff;
color:#000;
-moz-transition-duration:0.8s;
-webkit-transition-duration:0.8s;
-o-transition-duration:0.8s;
}
<div id="sidebar">
<div id="sidebarimg"><img src="{image:sidebar}"></div>
<div id="links">
{text:Link 1 Text}
ASK
MY EDITS
{text:Link 4 Text}
</div>
EDIT: thanks for the help guys!
No, this is not possible. You can only change an element based on CSS hover behaviours based on the hover state of itself or one of the higher identifiers in your selector.
You can 'cheat' a little using the adjacent and general sibling selectors, but not to entirely different parts of the DOM tree.
Here's an example of both cases where the hovering of an element can affect another element's rendering:
div {
border:1px solid black;
padding:5px;
}
div:hover button:first-of-type {
background:red;
}
button:hover + button {
background:red;
}
<div>
<p>The first button will highlight when you mouse into the container. The second button will highlight when you hover over the first.
<button>Button 1</button><button>Button 2</button>
</div>
In all more complex cases you'll need Javascript.
You could add an :after pseudo element to the links.
The pseudo element could then be position absolutely above the links.
Then apply a different background-image for each link.
See this jsFiddle
#links a:after {
content: '';
position: absolute;
top: 15px;
left: 15px;
width: 200px;
height: 200px;
}
#links a:nth-child(1):hover:after {
background-image: url('...');
}
Intention:
a div with a pretty picture and title
when the visitor hovers over the div, the pretty stuff is replaced by a descriptive text
a CSS-only solution
simple, right?
Here's what I am trying:
HTML:
<div class="drunter">
I am below
<div class="drueber">
I am on top
</div>
</div>
CSS:
.drunter {
position:relative;
background-color:#f00;
}
.drueber {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:none;
background-color:#00f;
}
.drueber:hover {
display:block;
}
jsfiddle
Why is this not working?
When I view the page in Chrome and go about it with the inspector, switch on the :hover state on the "drueber" element, it works as expected. But when I actually hover over the div, nothing happens.
As the .drueber has display:none; property it can't be hovered. so you need to trigger the hover event on the parent like this :
.drunter:hover .drueber {
display:block;
}
DEMO
.drunter {
position:relative;
background-color:#f00;
}
.drueber {
display:none;
background-color:#00f;
}
.drunter:hover .drueber {
display:block !important;
}
i make a little changes in css try this code.
I want the hover background to stretch all the way from border to border of the div and not just wrap the word
<div id="selection">
<label class="category_label"><input type="checkbox">abc</label><br>
<label class="category_label"><input type="checkbox">d</label>
</div>
CSS:
#selection{
padding:0.5em;
width:200px;
height:150px;
overflow-y:auto;
position:absolute;
border:1px solid #000;
background: white;
}
label.category_label{
cursor:pointer;
width:100px;
}
label.category_label:hover{
background:#ccc;
}
http://jsfiddle.net/2H2tr/1/
There you go:
http://jsfiddle.net/vahidseo/2H2tr/3/
Delete that br tag.
Change this:
label.category_label{
cursor:pointer;
width:100%;
display: block;
}
One thing You can do is set label styles to
display:block;
remove "br" tag, then, on hover You just set label to
width:100%;
and thats it :-)
updated fiddle: http://jsfiddle.net/2H2tr/2/
try this
label.category_label{
cursor:pointer;
width:100%;
float:left;
}
http://jsfiddle.net/2H2tr/4/
Wrap each of the label elements in a div (which is designed to have display: block;) and give that the hover rule:
div.wrapper:hover {
background: #ccc
}
Fiddle
I'm trying to create something that looks like this:
so far I have: http://jsfiddle.net/ePse6/
Without using something like: margin-top:-25px;, how can I position the Edit/Delete links to be on the right of the title (the part that says "iPhone" or "Android") and have both the title and links halfway between the borders?
Thanks!
just like most of answers, here i come with text-align:right and float:left .
I reduced code to minimal and plain CSS for your actual structure and to make it clear to you : http://jsfiddle.net/ePse6/7/
ul , a { /* basic reset we need */
padding:0;
margin:0;
color:gray;
text-decoration:none;
}
.mini > ul > li {
display:block;/* reset from list-item */
border-bottom:solid;
text-align:right;
overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
float:left;
margin:0;
}
.mini > ul > li ul,
.mini > ul > li li {
display:inline-block;
}
Why not use something simple and really handy?
I have removed all of your messy code, and have created a new fiddle for you.
http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/
I have used just a few lines of code, I have used a div and inside that, I have used 2 paragraphs to seperate each of them. Then inside that I used span element to seperate the right and left floating elements.
Using CSS I selected the classes and then styled them to get the desired input!
Here is the code:
<div>
<p>
<span class="left">Android</span><span class="right">Delete Edit</span>
</p>
<p>
<span class="left">iPhone</span><span class="right">Delete Edit</span>
</p>
</div>
CSS is as:
p {
border: 1px solid #333; // border that you wanted!
padding: 20px; // padding all around the element
padding-bottom: 40px; // padding at the bottom of the element
}
.left {
float: left; // making the elements float at the left
}
.right {
float: right; // floating elements at the right side
}
You can go to the fiddle page, and check for the design of the layout now. It was a simple thing. Hope its what you wanted.
This is without the lists. Just some CSS to do the trick: http://jsfiddle.net/Lg96p/
CSS:
.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}
.title{
font:bold 16px arial;
}
.fl{
float:left;
}
.fr{
float:right;
}
.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}
HTML:
<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
You should create two columns that fill the parent div. Make them both float:left; and for the right column you can align the text to the right text-align:right; or put two divs in it with float:right; for edit and delete.
Here is my fiddle: http://jsfiddle.net/ePse6/5/
Whatever you put into the columns or how to format it is up to you. But from here you have 2 columns independently next to each other.
If you want multiples of these stacked on top of each other i would change the container to a class and just add multiple of these containers with the columns to keep it tidy and readable. Like in this fiddle: http://jsfiddle.net/ePse6/6/
HTML:
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<a hreft="">Edit</a><a hreft="">Delete</a>
</div>
</div>
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<div class="button">Edit</div><div class="button">Delete</div>
</div>
</div>
CSS:
.container
{
width:600px;
margin:auto;
}
.leftCollumn
{
float:left;
width:400px;
background-color:#999;
}
.rightCollumn
{
float:left;
width:100px;
text-align:right;
background-color:#CCC;
}
.rightCollumn a
{
margin-left:10px;
margin-right:5px;
}
.button
{
margin-left:10px;
margin-right:5px;
background-color:#000;
color:#FFF;
float:right;
}
I have a list of businesses separated by categories. Next to each category name, starting at about 20px apart, I'd like to have a 3px tall border stretching to the end of the div. I would like for that border to be filled with a pattern, or image. Initially, I tried just using an image, but as each category name is a different length, that proved to be impractical.
I'm sure there is a relatively easy way to go about this, I'm just not certain on how to make it happen. Ideas?
Thanks.
updated image
here I'm using a <div> to show the border behind the <h1> category where both the <body> and <h1> have matching background patterns (that are also lined up)
example jsfiddle
CSS
body {
background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png');
font-family:helvetica,arial,sans-serif;
}
#container {
margin:0 20px;
position:relative;
}
h1 {
position:relative;
float:left;
padding-top:6px;
padding-right:20px;
font-size:2em;
background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png')
}
.border {
background:url('http://s3.amazonaws.com/creattica/uploaded-images/0016/6142/patterns_009_blue-hexagon-pattern_crop-iphone_web_for-creattica.jpg') repeat-x -10px 0;
position:absolute;
top:20px;
width:100%;
height:3px;
}
.listings {
clear:both;
}
HTML
<div id="container">
<div class="border"></div>
<h1>Catering</h1>
<div class="listings">
<ul>
<li>
Catering Company 1
</li>
<li>
...
</li>
</ul>
</div>
</div>
If additional markup is allowed (and your parent element has a solid background), you could go about it this way:
h1 {
background: red; /* replace with background-image */
}
h1 span {
background: white; /* replace with color of parent element's bg */
}
<h1><span>Test Headline</span></h1>
http://jsfiddle.net/358Gg/