I'm trying to cause one element to change when another element is hovered. I know this can be done using the sibling selector (~) but it doesn't seem to be working. I tried to find an alternative to using the sibling selector but only found solutions in javascript which I don't know.
I think the problem may come from the fact that I'm trying to tie multiple elements to one sibling, that is to say, hovering over 3 different divs all change one div in three different ways. I don't think there's a mistake though I could be wrong, the code is here...
CSS
#internalContainer {
width:900px;
height:400px;
}
#sectionLeft {
float:left;
height:400px;
width:300px;
}
.leftInternal {
height:100px;
width:300px;
text-align:right;
}
#titleA {
font-size:11pt;
font-weight: bold;
text-transform: uppercase;
letter-spacing:1px;
position:relative;
top:40%;
transition:.2s
}
#sectionRight {
float:left;
width:568px;
height:400px;
margin-left:32px;
background-color:#f2f2f2;
}
#titleA:hover {
top:45%;
transition:.2s
}
#titleA:hover ~ #sectionRight {
background: #ccc;
}
HTML
<div id="internalContainer">
<div id="sectionLeft">
<div class="leftInternal"><div id="titleA">Title of One</div></div>
<div class="leftInternal"><div id="titleA">Title of Two</div></div>
<div class="leftInternal"><div id="titleA">Title of Three</div></div>
<div class="leftInternal"><div id="titleA">Title of Four</div></div>
</div>
<div id="sectionRight">
</div>
</div>
http://jsfiddle.net/xs7h8/
Currently nothing changes when the links are hovered but they're all set to do the same thing right now. I was going to make subclasses for titleA and connect each to the sectionRight but that didn't work either.
You cannot have duplicate IDs. It simply won't work. That is your problem
Also, the #titleAs are not siblings of #sectionRight so the sibling selector will not work. #sectionRight is an uncle to them and, since there is no parent selector at the moment, there is no way to select it using CSS on hover
You also don't need to repeat the transition in the hover, it is inherited from the default state
This is the closest you can get using your current setup and no javascript, applying the hover to #sectionLeft instead
Related
I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.
If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>
I have a situation in which i want to change the color of my box with the on hover from the container i which this box is found.
I found out how to do this through a different question here on stackoverflow How to affect other elements when a div is hovered
But now i want to change the color of my box to a third option when i hover the box itself.
This is and exaple html with css.
<body>
<div class="container">container
<div class="box">
box</div>
</div
</body>
</html>
and the css.
.container{
background-color:grey;
height: 100px;
width:100px;
}
.container:hover .box{
background-color: aqua;
}
.box{
background-color: blue;
width:50px;
height: 50px;
}
.box:hover{
background-color: white;
}
This is the way i tried to do it but this does not work. The first steps works but i can't get the third color.
Simply change
.box:hover{
background-color: white
}
TO
.container:hover>.box:hover{
background-color: white
}
And try it here: http://jsfiddle.net/czmzxd6j/
You'll have to create a more specific selector.
You're setting .container:hover .box {...} which is more specific than .box:hover.
Your issue will be resolved if you use .container:hover .box:hover {...} because this is more specific than the one with just the .box at the end.
Using the direct-child selector isn't the way nor is !important (sorry guys, no offence but it's just not the correct approach here.)
CSS is all about overwriting and that is why these things can be nasty sometimes.
Whenever something doesn't get applied correctly just think to yourself for 3 seconds: "Are there any other selectors that manipulate this element that could be more specific?".
With the general selector .box:hover any box anywhere in the DOM will have that hover as long as it has the .box class however this is not true for the other selector including .container:hover .box:hover.
That selector is actually more specific due to the fact that now only .box elements within the .container elements get the hover.
By specifying the general selector instead of one that is atleast as specific it will simply be overwritten by the more specific one, that's why you need to re-add .container:hover to the selector.
I hope it makes sense to you.
Good luck!
try this:
.box:hover{
background-color: white !important;
}
you can see it here: https://jsfiddle.net/fusg2o3f/
I have used the following HTML and CSS codes:
p.head-1 {
font-size:250%;
color:#696969;
}
p.head-2 {
font-size:100%;
}
p.head-1+p.head-2 {
text-align:center;
display:block;
}
<div id="header">
<p class="head-1">
This is main heading
</p>
<p class="head-2">
this is another header component
</p>
</div>
but despite of using the sibling selector only head-2 is accepting CSS properties while head-1 remains in-effected
ie the 'text-align' property is only accepted by the head-2 class but not by the head-1
You misunderstood the Adjacent sibling selector.
What it does, and did successfully in your case, is to identify an element which is adjacent to another.
In your example it would identify head-2 only if it is adjacent to head-1. But head-1 itself is not included.
You may simply wrap your css like this:
#header p{
font-size:250%;
color:#696969;
text-align: center;
/*display:block -- not needed as p is block level element by default*/
}
Or, using more complex selector:
p[class^="head"]{
text-align: center;
}
If you want to combine the selector then use a comma not plus operator (plus operator is used for next sibling):
p.head-1, p.head-2
{
text-align:center;
}
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.
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