<div class='checked' id='rb01'></div>
<div class='rb' id='rb02'></div>
<div class='rb' id='rb03'></div>
<div class='rb' id='rb04'></div>
css
.rb{
display:inline-block;
width:12px;
height:12px;
background-color:#ffffff;
border-radius:50%;
margin:0 5px;
cursor:pointer;
}
.rb:hover {
background-color:#B30000;
border:2px solid #ffffff;
}
.checked{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
margin:0 5px;
cursor:pointer;
background-color:#B30000;
border:2px solid #ffffff;
}
So hovering a .rb div it becomes red and it works.
But, how can I make that, when hovering a .rb div, any div which is .checked - becomes non-red, i.e. - .rb ?
Using jquery, you may try something like;
$( ".rb" ).mouseover(function() {
$(".checked").css('background-color', 'blue');
}).mouseout(function() {
$(".checked").css('background-color', 'red');
});
Here is a working demo.
As the .rb and the .checked containers are not nested nor related, what you are looking for is probably some javascript solution.
jQuery provides a .hover() method that you can use to achieve your goal with just a few lines (say, on hover for .rb element you can add an extra CSS class for the .checked div, and provided you define non-red styles for this .checked.new-class in your css, you'll have it made :)
you can give css like this
.rb:not(.checked):hover { do css here}
Related
I'am currently working some code for my website and i came to this problem.I want to change background of paragraph on div's hover but it doesn't seems to works.I found some tutorials and I don't know what is wrong with my code
<style>
.more_news{
padding:10px;
border:1px double lightgray;
width:170px;
height:100px;
overflow: hidden;
margin:0px;
}
.more_news img{
width:100%;
height:100%;
}
.more_news p{
color:green;
position:absolute;
display:block;
background:gray;
margin-top:-40px;
width:170px;
height:40px;
}
.more_news div:hover ~ .more_news p{
background:red;
}
</style>
<div class="more_news">
<img src="images/proba1.png" class="more_news_img">
<p class="more_news_p">Hello</p>
</div>
All you need to do is select the class and element like so:
p.more_news_p:hover {
background:red;
}
No need for ~ or any other combinator/selector
http://jsfiddle.net/7H4XW/
Or, if you want to change the background when you hover over the entire div you can do something like this:
.more_news:hover p.more_news_p {
background:red;
}
http://jsfiddle.net/qfb9Z/
"I want to change background of paragraph on div's hover but it
doesn't seems to works."
You'd just use:
.more_news:hover > .more_news_p {
background:red;
}
You were using the general sibling selector ~, which selects sibling elements after that element.
whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)
jsFiddle here
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover
This is how the code looks:
And I want to a border for the highlighted element, i.e. <div class="Comment">...</div>, how do I style it using CSS?
NOTE: Notice the class named 'Comment'? It is used in both the highlighted element and it's parent element. So, that's probably why this one's a bit tricky?
I tried the CSS codes below, and some others, and none worked.
.DataList .Item .comment, .DataList .Comment .comment,
.DataList .FirstComment .comment, .DataList .Mine .comment {
border:1px solid #666;
padding:10px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.DataList .Item div.comment, .DataList .Comment div.comment,
.DataList .FirstComment div.comment, .DataList .Mine div.comment {
border:1px solid #666;
padding:10px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
What am I doing wrong? Hope someone can help me solve this small riddle. Thanks.
first, try NOT styling with extreme specificity (adding parent/element selectors). this way, you can just use .Comment - note that they ARE case sensitive.
if styles are overridden or you have selectors of the same name but different "context" (like you have a list item with .Comment and it's child with div with .Comment), that's when you use higher specificity (adding the parent/element in the selector) like div.Comment, .Item .Comment
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>