I've done this, this , and this but gives me no luck. I'm trying to change the color of a div when the lower element is being hovered but I can't do it. I have this HTML structure like so:
<div class="ms-parent">
<button type="button" class="ms-choice"></button>
<div class="ms-drop"></div>
</div>
Here is what I've tried so far:
.ms-parent:hover,
.ms-choice:hover + .ms-drop,
.ms-drop:hover,
.ms-choice:hover,
.ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }
So when .ms-drop is being hovered I want .ms-choice to change its style. What I'm missing here?
There is no Upper/previous element selector in CSS. You can select next immediate sibling element using + and you can select all the next siblings element using ~.
Kindly note it down, I mentioned next, because there is no previous selectors right now. Hopefully that will introduce on CSS4. You can use jquery to achieve this. Otherwise if you want to do it in CSS, you need to change the HTML structure like below.
<div class="ms-parent">
<div class="ms-drop"></div>
<button type="button" class="ms-choice"></button>
</div>
Now you can target it like below.
.ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }
Or
.ms-drop:hover + .ms-choice{ color:#000000!important; background: #ffffff; }
DEMO
Related
I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
How should I go about changing the color of a span on mouseover? I currently have a tab (like in a menu) that has been classified as a span, let's say .rtsOut with a background color of #595959. Each tab is still classified as the same span, .rtsOut, but is divided into 4 different tabs. When I mouseover, I'd like to change that one tab to to, #000000, and to revert back to #595959 when the mouse is moved off of the span.
I unfortunately don't have access to the whole overlook of CSS like so:
<style>
span:hover {
background: ######;
}
</style>
and instead I have a very simple view like this, where I just input single lines of code:
#SampleThing {visibility: hidden;}
Can anyone help me? I've been Googling, and testing for hours, and can't come up with a solution.
So far, this is what I've found. I believe this is how the span has been created:
<li class="rtsLI"> == $0
<a class="rtsLink tbLeft4" id="TbInformation" href="../Info/Info.aspx">
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
</a>
</li>
And I've tried changing the background color of that span using this:
.rtsOut:hover {background: #000000;}
However, that line of code isn't working :(
Take a look at my codePen here
CSS
.rtsOut:hover{
background-color: red;
}
HTML (Assuming it looks like this)
<div>
<p>
<span class="rtsOut">One</span>
<span class="rtsOut">Two</span>
<span class="rtsOut">Three</span>
</p>
</div>
Also note that if you would like some more flexibility down the road, you may want to look into using <ul> and <li> for Nav Menu items.
When I mouseover, I'd like to change that one tab to to, #000000, and
to revert back to #595959 when the mouse is moved off of the span.
.rtsOut:hover {background: #000000;}
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
Assuming that your HTML really is:
<span class="rtsOut">
<span class="rtsIn">
<span class="rtsTxt">Edit Information</span>
</span>
</span>
and this isn't working:
.rtsOut:hover {background: #000000;}
Then, it tells me that someone has generated styles that are "more specific" than the ones you are providing.
CSS styling rules are applied from "most specific to least specific". For example: parent > .rtsOut { background-color: red; } will take precedence over .rtsOut { background-color: blue; } because it is more specific. As well, inline styles will have one of the highest precedence, so <span class="rtsOut" style="background-color:red;"></span> will override .rtsOut { background-color: blue; }. See http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ for more information.
I would start by adding !important to your styles (as this will always have the highest precedence if nothing else has been given !important), to see if the above is the case.
Also, I would most definitely get used to browser developer tools. They allow you to delve right into the active code and do live edits. You will be able to see if there is an inline style or another style rule that has more precedence over the one you are trying to provide.
As far as I can tell, this simple example below should be working but it doesn't. I'm obviously missing something, but I can't for the life of me figure it out.
The first .field div should have red text, but it simply does not...
Running Chrome browser on Mac.
http://codepen.io/anon/pen/obbmjd
p .field:first-child {
color: red;
}
<p>
<div class="field">first - should be red</div>
<div class="field">second</div>
</p>
The HTML is invalid.
A p element can't contain a div element. This results in the following:
<p></p>
<div class="field">first - should be red</div>
<div class="field">second</div>
<p></p>
As you can see, the browser is automatically closing the p tags, which explains why your selector isn't matching anything.
If the HTML was actually valid, then your selector would work. For instance, if you replace the div elements with span elements, the following would work:
Updated Example
p .field:first-child {
color: #f00;
}
try
.field:first-child {
color: red;
}
I am not at all getting how to use more advanced css-selectors like + or >
But as I am now needing it to prevent too much JS, maybe someone can help me out with this particular situation of this block:
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
and I wanna do that:
.rf_re1-suche_container input:focus{
background:orange;
}
but also for the button. So: If the input has a focus I want the input AND the button to have the same background. How would I do that? Thanks!
You will need to target the input and the button separately. Because you want this to apply only when the input has focus, you will need to repeat the entire selector including the input:focus portion, then use a + combinator to link the button to the focused input:
.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus + button {
background: orange;
}
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
Just add the selector for the button, separated with a comma:
.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus ~ button {
background: orange;
}
The tilde (~) is the general sibling selector. It selects the element ONLY if it is preceded by the element before the sibling.
This is by the way quite similar to the adjacent sibling selector, but with the latter the two elements need to be right behind eachother. In your case it doesn't really matter, as these two elements are the only one in the parent.
I have some text, and I would like it so that certain other bits of text within the same page change font color, when hovering over the initial text.
For example, with the code below, when hovering over the "Hover over me" text, I would like it to change the font color of the two spans with class="span2" to red.
Annoyingly, it doesn't want to do this if the span is within a table cell:
<style type="text/css">
.span1:hover ~ .span2 {
color: red;
}
</style>
<span class="span1">Hover over me</span>
<br>
<span class="span2">This font colour changes as required.</span>
<br>
<table>
<tr>
<td>
<span class="span2">This font colour doesn't change, why?</span>
</td>
</tr>
</table>
I have tried various combinations of adding classes/ids to the td and CSS code, but haven't had any luck, so hopefully someone can provide a solution!
Note: I don't necessarily need it to work outside AND inside a table cell, in fact, I only really need it to work inside a table cell, but there will be multiple occurrences of the text spread over different tables.
The issue here has to do with the ~ selector. It only selects subsequent siblings and not children of siblings. This is why it works on your first line, and not the one nested in the table. Here is a handy list of css selectors that I find helpful.
Unfortunately there isn't a way to solve this purely with CSS without changing the way your html is laid out. You could try something like:
Html:
<div class="wrapper">
//all your existing html
</div>
CSS:
.wrapper:hover .span2 {
color: red;
}
Or you could keep your current html, and go a jQuery solution:
$(document).ready(function () {
$('.span1').hover(
function () {
$('.span2').css('color', 'red');
}, function () {
$('.span2').css('color', 'black');
}
);
});
Here is a working fiddle of both.
I don't think that CSS can perform this kind of functionality.
Jquery could definitely handle this feature, if you're not opposed to using it. A simple onhover event that would manipulate the css you want would work.
Is your span1 always going to be a sibling of the table you want to find span2 in? If so,
.span1:hover ~ table tr td .span2 {
color: red;
}
http://jsfiddle.net/S5VAp/
But, if span1 is another td in the table, or if your tables become nested, it becomes more difficult. In that case a javascript solution would be much more straight forward.
For the same reason that if you wrap <span class="span2">This font colour changes as required.</span> in a div (e.g. <div><span class="span2">This font colour changes as required.</span></div> even the first .span2 won't turn red! Because it doesn't match your css rule!
Doing something like this JSFiddle will work for you:
CSS (your rule UNchanged):
.span1:hover .span2 {
color: red;
}
HTML (wraps all .span2 within .span1):
<span class="span1">Hover over me
<br />
<span class="span2">This font colour changes as required.</span>
<br />
<span>This should not be red</span>
<table>
<tr>
<td>
<span class="span2">This font colour doesn't change, why?</span>
</td>
</tr>
</table>
</span>
I had the problem where the table row will highlight correctly but the font color inside each td tag stayed the same.
Problem:
tr:hover {
background: #0585fd;
color: #FFF;
}
Fix:
tr:hover td {
background: #0585fd;
color: #FFF;
}
Adding the td to the tr:hover pseudo made the text inside the td tag turn white on hover for the entire row.