I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
HTML
<div class="services-section-holder">
<div class="services-section-img"></div>
<div class="services-section-title"><p>Exhibition</p></div>
</div>
CSS
.services-section-holder{
position:relative;
width:270px;
height:70px;
margin-bottom:5px;
}
.services-section-img{
position:relative;
width:80px;
height:75px;
float:left;
background:url(../images/greycircle.jpg);
}
.services-section-title{
position:relative;
float:left;
height:75px;
margin: 0 auto;
display: table;
padding-left:20px;
}
.services-section-title a {
text-decoration:none;
}
.services-section-title a {
color:#000;
}
.services-section-title a:hover {
color:#906;
}
.services-section-img:hover {
background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
color:#906;
}
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
Related
html{
background-color:#739AC5;
}
img{
display:inline-block;
color:#739AC5;
background-color:#739AC5;
margin:0px;
}
I added two inline-block gif images. However, after I add them, the background color changes from a light blue to white but only on that line. I've added color and background-color properties to image but nothing changes. If I remove the images from my HTML, the background-color returns to normal. I searched somewhere to change line-height:0; but this did not work for me either.
Any ideas as to what is going on? I might add I am using bootstrap but I linked my stylesheet last.
There is a more specific selector for img elements, such as:
div img { background-color: #fff; display: block; }
This selector overrides the other one since specificity trumps the cascade.
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.
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I'm making a menu with an icon and some text, like this:
The problem is, I want the icon to be "highlighted" when I hover over the tab, instead of having to hover above the tiny icon. So this is what happens now:
So my question is how can I hover on one element (the tab is a div), and that activates the hover CSS for another element (the icon).
This is the code for the icon:
(HTML)
<a href="#" class="menubutton">
<span id="playicon"></span> Servers
</a>
(CSS)
#playicon {
width:12px;
height:12px;
background-image:url("img/svg/play2.svg");
background-repeat:no-repeat;
display:inline-block;
}
#playicon:hover {
background-image:url(img/svg/play_hover.svg);
}
Thank you in advance! :)
With the HTML you give, you need to change the second rule to
.menubutton:hover #playicon {
background-image:url(img/svg/play_hover.svg);
}
This rule applies to #playicon when it is a descendant of a hovered .menubutton, which is what you want (using the child selector .menubutton:hover > #playicon might be a good idea, although it won't make any practical difference).
Also, please note that having a <span> like this identified by an id is somewhat strange -- it looks like you would have multiples of this span on the same page, and ids need to be unique. If you do have multiples, replace the id with a class.
#element1:hover #element2
Live example, with more advanced css techniques
Use the :hover pseudo class on the menubutton instead of the icon
#playicon {
width:12px;
height:12px;
background-image:url("img/svg/play2.svg");
background-repeat:no-repeat;
display:inline-block;
}
.menubutton:hover #playicon {
background-image:url(img/svg/play_hover.svg);
}
I have a heading which is likely to span over two lines, i'd like the heading to have a background color but for it to only span the width of the text on the line, like this:
http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png
So far all the solutions I have found only appear to work against a background with a solid colour, anyone have any ideas how I can achieve this?
What your are requesting for is an old question that come up again and again once in a while , text or inline element cannot achieve it, element formated as a box will turn out to be square or rectangle.
The only way to do it , is to set side by side inline-block elements wrapping words or groups of words.
Script server or javascript can help you, so you should not have to mind text markup while typing.
The idea looks like this : http://jsfiddle.net/rnCTL/
h1 span {
background: #fff;
line-height:44px;
padding:4px 4px 4px 10px;
margin:0;
display:inline-block;
}
.headline-black {
height:219px;
width:367px;
background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png);
padding:40px;
box-sizing:border-box;
}
Try this.
Basically if you have a containing background element you can any element on top of it with another background.
Check out the Fiddle
h1{
width:200px;
background:white;
display:inline-block;
margin-left:60px;
}
I've done this in situations where you put a <span> within the Header tag and applying the background color to that. Bear in mind, you won't have any padding where the line breaks: check out this fiddle - http://jsfiddle.net/R5ZsG/
If you can put a   that would work to pad where it breaks but you might not have full control over it.