I want to apply the hover state remotely, by hovering on a different object. But I want to name the object that has its hover activated rather than have it be by DOM relationship to the item being hovered over.
<style>
img:hover {border: thin red solid;}
</style>
<li id="hover-over-me">Dogs</li>
<img src="dog.jpg" />
I haven't found a javascript or jquery method that allows you to apply the hover pseudo-class effect to an element remotely (ie independently of it actually being hovered). Is there a way to do this?
http://sandbox.phpcode.eu/g/3304b
<style>
img:hover,img.hovered {border: 5px red solid;}
</style>
<ul>
<li id="hover-over-me">Dogs</li>
</ul>
<img src="http://4.bp.blogspot.com/_7VyEDKFMA2U/TOX9ZL7KRPI/AAAAAAAAACM/-XSoYjePBPk/s1600/cute-puppy-dog-wallpapers.jpg" />
<script>
$("li").mouseenter(function(){
$("img").addClass('hovered');
});
$("li").mouseout(function(){
$("img").removeClass('hovered');
});
</script>
If you mean specifically the CSS :hover pseudo selector, then one element can only trigger it on another insofar as a relationship can be established in CSS:
http://jsfiddle.net/tFSWt/
example as siblings:
<span>Sibling </span><img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
img:hover { border: 2px dashed blue; }
span:hover + img { border: 2px dashed blue; }
example as ancestor/descendant:
<span>Parent
<img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
</span>
img:hover { border: 2px dashed blue; }
span:hover img { border: 2px dashed blue; }
Otherwise you'll need to rely on JavaScript to select the related element and set the style on either by inline styling, or by adding a class that provides the appropriate style.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 19 days ago.
If I have two DIVs where I apply CSS using :empty so that if one DIV has content, then the other's background will change color, it works if the DIVs aren't nested. In the fiddle, type anything into the top white box, the other will turn yellow.
http://jsfiddle.net/7fwL26ox/7/
<div id="inner-div" contenteditable=true></div>
<div id="outer-container">
</div>
#outer-container {
padding: 2em 0;
background-color: #CCC;
}
#inner-div{
border: 1px solid #000;
}
#inner-div:not(:empty) + #outer-container{
background-color: yellow;
}
If I nest the DIVs, where the DIV that is empty and changes content, is nested inside the DIV that changes color, it no longer works (input is outlined in the fiddle).
http://jsfiddle.net/vpcwtg7m/1/
<div id="outer-container">
<div id="inner-div" contenteditable=true></div>
</div>
#outer-container {
padding: 2em 0;
background-color: #CCC;
}
#inner-div{
border: 1px solid #000;
}
#inner-div:not(:empty) + #outer-container{
background-color: yellow;
}
I would have expected in the second fiddle, that the background will also change to yellow. Exact same CSS, just the placement of the DIVs has changed. Cheers!
The + in your CSS selector is an adjacent sibling combinator. It targets the next sibling after itself.
Your first example works because #outer-container is the next sibling:
<div id="inner-div" contenteditable=true></div>
<div id="outer-container">
When you rearrange your HTML the CSS is targeting a sibling that no longer exists:
<div id="outer-container">
<div id="inner-div" contenteditable=true></div>
<!-- CSS is looking for your outer-container div here, as the next sibling after inner-div -->
</div>
To style a parent based on the child, you'll have to use the new :has() pseudo class that is still gaining browser support:
#outer-container {
padding: 2em 0;
background-color: #CCC;
}
#inner-div {
border: 1px solid #000;
}
#outer-container:has(#inner-div:not(:empty)) {
background-color: yellow;
}
<div id="outer-container">
<div id="inner-div" contenteditable=true></div>
</div>
I want to change the background-color of a child of a div with a certain background color and was wondering if this could be done with CSS. I'll explain the case below.
something like:
.container[background-color=some color] .content {
background-color: some other color
}
My guess is that it can't be done because you would then be able to do something along the lines of:
.div {
background-color: some color
}
.div[background-color=some color] {
background-color: some other color
}
Which would create some kind of circularity where the div would be selected, set to the other color, then not be selected anymore and fall back on the original definition, but then be selected again because it has that original color.
I don't think the :has, :is and :where selectors work this way either but I was hoping there was some way this could be done while avoiding doing it in Javascript.
The Case
Divs are created dynamically based on errors in user input. These divs may or may not contain a certain type of error for which another div is needed
// simple errors
<div class="errors">
<p>Error 1</p>
<p>Error 2</p>
<p>Error 3</p>
<p>Error 4</p>
</div>
// more complex errors
<div class="errors">
<p>Error 1</p>
<div class="complex-error">
<p>Complex Error 1</p>
</div>
</div>
I give the errors div a background color with odd/even
.errors {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
border-radius: 4px;
margin: 8px 0px;
}
.errors:nth-child(odd) {
background-color: #dee2e6;
}
.errors:nth-child(even) {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
}
I was wondering whether or not the elements with class errors could be selected based on background color to then select it's child.
I'll post my own solution as the answer.
The best way to do it without using JavaScript would be with classes. You can add the first background-color with a class that you add to the children that need to have that background color. Then, you change the background-color of only the children that have that class. And if you need to you can add and remove the class dynamically with JavaScript (as you are not providing an example of the whole app I don't fully understand the behaviour you are looking for).
div.black {
background-color: black;
}
div.white {
background-color: white;
}
div.black {
background-color: #5A5A5A;
}
This is the way you could do it. Separate the class out to style the background color then use the class selector .class1.class2 to apply the rule to only the parent. Use the descendent class combinator to apply the background colour to the child.
Here's an example
.parent {
border: 1px solid black;
padding: 1rem;
font-size: 1.5rem;
margin-top: 1rem;
}
.yellow-backgroud {
background-color: yellow;
}
.red-background {
background-color: red;
}
/* this selects all child divs where the parent has the parent class AND the yellow-background class */
.parent.yellow-background div {
background-color: green;
}
/* this selects all child divs where the parent has the parent class AND the red-background class */
.parent.red-background div {
background-color: orange;
}
<div class='parent yellow-background'>
Parent
<div>
This is a the child of the yellow background parent
</div>
</div>
<div class='parent red-background'>
Parent
<div>
This is a the child of the red background parent
</div>
</div>
<div class='parent'>
Parent
<div>
This is a the child with no parent background color set.
</div>
</div>
The odd/even selector can already be used to select those elements.
.errors:nth-child(odd) {
background-color: #dee2e6;
}
.errors:nth-child(odd) .complex-error {
background-color: #f8f9fa;
}
.errors:nth-child(even) {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
}
.errors:nth-child(even) .complex-error {
background-color: #dee2e6;
}
There was no reason to select them after the fact when you can just select them at the place where they are defined.
I'm using an onmouseover/onmouseout over a table cell to change the styling for an image and a link in the cell. It works but is overriding the CSS link styling, namely the text-decoration: none and font color. I've tried correcting with inline CSS, but no dice. Any ideas? Also, I know the code is hideous. I just want to get it working before I put it into an external js file.
<td
onmouseover="
document.getElementById('myImage').style.border='3px solid #334f92';
document.getElementbyId('myLink').style.fontWeight='bold';
document.getElementbyId('myLink').style.textDecorationLine='none';""
onmouseout="
document.getElementById('myImage').style.border='1px solid #000000';
document.getElementbyId('myLink').style.fontWeight='normal';
">
First off, good thing you recognize that writing inline event listeners are not very conventional (and also hideous).
Have you considered achieving this through CSS? It may be a lot simpler and would eliminate the need for two separate event listeners for mouseover and mouseout. You would simply use the :hover css selector like so:
td {
border: 1px solid black;
/* Added padding for demonstration purposes */
padding: 20px;
}
td:hover {
border: 3px solid #334f92;
font-weight: bold;
text-decoration: none;
}
td:hover a {
color: orange;
}
td:hover img {
border-radius: 10px;
}
<table>
<tr>
<td>
Link
<img src="https://via.placeholder.com/100">
</td>
<td>
Link
<img src="https://via.placeholder.com/100">
</td>
</tr>
</table>
In addition, if you wanted to style an image within the <td> tag, you can do this:
td:hover img {
/*Apply CSS to image here*/
}
I have three different Links that all lead to the same page. But I need the page to load with different CSS settings (depending on which link was clicked, certain elements should be hidden on the new page).
Is that possible? Thank you!
Sure, you can use the :target pseudo-class to do so.
From MDN:
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
With target, you click a link, like page.html#some-condition, and in your CSS, listen for that condition. When the id matches the hash in the address bar, you have a match and the target is met.
A link
<div id="some-condition"></div>
#some-condition:target {
/* style appropriately */
}
Here's a quick demo. In this case, the links contain the ids, but as demonstrated above, you can structure things however you'd like.
#red:target ~ .result {
background-color: red;
}
#blue:target ~ .result {
background-color: blue;
}
#green:target ~ .result {
background-color: green;
}
.result {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid;
background-color: #fff;
transition: 0.3s background-color;
}
<a id="red" href="#red">Red</a>
<a id="blue" href="#blue">Blue</a>
<a id="green" href="#green">Green</a>
<div class="result"></div>
jsFiddle
I would like to toggle 2 different classes. (A b), but i am not getting the result.
what is the issue with my code?
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Color Change</button>
Give your div a 'starter' class. Otherwise the first will 'toggle both on', the next 'toggle both off' etc.
Since both are setting the border, the last applied class is being used, whilst the other is being ignored, so hence you won't see the 'red' border.
Think of it like toggling between one class - on or off. If you start with no class, then the button will add the class (understandably).
If you're toggling with two classes, the same rules apply. You start with both off, then the button will toggle both on - and due to the order of css applied/specificity of css, the second will overwrite the first css definition.
So, in order to 'switch', you need to start with one in the 'on' position, and one in the 'off' position. And there you go! once the button is pressed, one will toggle from on to off, and the other vice versa.
$('button').on('click', function() {
$('div').toggleClass("A B");
});
div {
height: 20px;
}
.A {
border: 1px solid red;
}
.B {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
$('button').on('click', function () {
$('div').toggleClass("A B");
});
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>
No need to toggle both the classes. One class you need to assign and another class you can toggle.
HTML
<div class="A"></div>
<button>Color Change</button>
JQUERY
$('button').on('click', function () {
$('div').toggleClass("B");
});
CSS
div{
height:20px;
}
.A{
border:1px solid red;
}
.B{
border:1px solid blue;
}
JSFIDDLE DEMO
If you seen here the logic is simple. When you click the button it add the additional class called B into the div. Once you click the button your div code will become like this <div class="A B"></div>
So it is important that the order of A and B in your CSS. For example if you move B class to the top of A class then you won't get the desired result.
Not working CSS:
div{
height:20px;
}
.B{
border:1px solid blue;
}
.A{
border:1px solid red;
}
Otherwise you can use the important keyword, so that it will not worry about the order, but not good in the practice.