This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 5 years ago.
In this example when a paragraph is hovered over its color is changed to blue, I would like all sibling paragraphs to also have this rule applied. Is there a way I can achieve this CSS?
I have the desired functionality working in JavaScript with jQuery, but would like a pure CSS solution.
Edit: It wasn't clear in my original post, this should apply to only select elements. See the updated HTML.
$(".groupHover").hover(
function() {
$(".groupHover").addClass("hoverClass");
},
function() {
$(".groupHover").removeClass("hoverClass");
}
);
.hoverClass {
color: red;
}
.groupHover:hover {
color: blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p class=>Not to be changed!</p>
<p class="groupHover">Line 1</p>
<p class="groupHover">Line 2</p>
<p class=>Not to be changed!</p>
<p class="groupHover">Line 3</p>
<p class="groupHover">Line 4</p>
<p class=>Not to be changed!</p>
Wrap them in a div and put the hover effect on that:
.wrapper:hover .groupHover {
color: red;
}
.wrapper:hover .groupHover:hover {
color: blue; /* try not to use important - it should only be used if you desperately need to override an inline style you have no control over */
}
<div class="wrapper">
<p class="groupHover">Line 1</p>
<p class="groupHover">Line 2</p>
<p class="">No class, stays black</p>
<p class="groupHover">Line 3</p>
<p class="groupHover">Line 4</p>
</div>
Related
I have a reusable accordion component but what I'm trying to achieve is for the first accordion to have a greater padding set, compared to the others. Can this be achieved via CSS? If not, what's the best way to achieve this via jQuery/JS.
Note: I can't just add a class to the first section, as I've stated, it's a reusable component, so the markup is always the same.
<!-- Apply padding to this section only -->
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
Update: first-of child won't work and I have updated the answer
You can achieve this way by a workaround with pure CSS: select every element of the class that is the sibling of the same class -> invert it, -> select by the class again.
Working Codepen: https://codepen.io/tusharg09/pen/oNoOxrq
:not(.accordion-wrapper ~ .accordion-wrapper).accordion-wrapper {
color: red;
}
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
Assuming that accordion sections are the only children of some parent element it can be done via css. You can use first-child pseudo class:
.accordion-wrapper:first-child {
...
}
While in the simple cases you may be able to use CSS only, for a general solution which works whatever the HTML structure is, you need to use a bit of JS.
This snippet finds the very first occurence of the element with that class in the whole document. It then adds another class to it which sets the padding.
<!doctype html>
<html>
<head>
<style>
.accordion-wrapper.extra {
padding: 10px;
}
</style>
</head>
<body>
<!-- Apply padding to this section only -->
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<script>
const first = document.querySelector('.accordion-wrapper');
first.classList.add('extra');
</script>
</body>
</html>
UPDATE: since giving the answer above, I've seen the HTML structure for this specific question and that can be solved by CSS only using:
main section:first-of-type
as the selector. Just be aware that if the structure changes it may not be right, as indeed the first answer may not be if other such sections are put in above main.
It is perhaps safest to combine the two approaches and in the JS select the first section within main. Depends on the actual use case of course.
Well there are several ways to achieve this. Since you try to build an accordion so you basically know which of your accordion keys will be different shaped, right?
Therefore you can use for example, assigning a second class to your div. Or another way would be, :nth-child() like every second or third key will be shaped in another way. You can find the example code snippet outside of the Code itself.
.accordion-wrapper {
display:flex;
flex-direction: column;
}
.accordion-key {
border: 1px solid #333;
padding: 5px 0 5px 10px;
}
.accordion-keyBlack {
background-color: #111;
color: #fff;
padding: 10px 0 10px 20px;
}
<div class="accordion-wrapper">
<div class="accordion-key">A</div>
<div class="accordion-key accordion-keyBlack">B</div>
<div class="accordion-key">C</div>
<div class="accordion-key">D</div>
<div class="accordion-key">E</div>
</div>
or you can use :nth-child() for example to define that every second key is black or whatever. Further read, here: https://developer.mozilla.org/de/docs/Web/CSS/:nth-child
.accordion-key:nth-child(2n) {
background-color: #111;
color: #fff;
padding: 10px 0 10px 20px;
}
Of course you can use JS as well, but therefore we would need more details, like the logic of key-arrangement itself.
Select first div with specific class is not possible with CSS. The closest result is:
section {
padding: 10px;
margin: 10px;
background: red;
}
.accordion-wrapper:first-child,
:not(.accordion-wrapper) + .accordion-wrapper {
padding: 10px;
background: yellow;
}
<section class="something-random"></section>
<!-- first div with class is here -->
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
It selects first child .accordion-wrapper:first-child or an element that is not preceded by an element with the same class :not(.accordion-wrapper) + .accordion-wrapper.
Problem of this approach is this case:
section {
padding: 10px;
margin: 10px;
background: red;
}
.accordion-wrapper:first-child,
:not(.accordion-wrapper) + .accordion-wrapper {
padding: 10px;
background: yellow;
}
<section class="something-random"></section>
<!-- first div with class is here -->
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="something-random"></section>
<!-- but this is not first with class -->
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
I am starting with this:
*::-webkit-scrollbar {
}
*::-webkit-scrollbar-button {
}
*::-webkit-scrollbar-track {
}
*::-webkit-scrollbar-track-piece {
}
*::-webkit-scrollbar-thumb:active {
width: 6px;
background-color: red;
}
*::-webkit-scrollbar-corner {
}
*::-webkit-resizer {
}
How do I go about recreating the functionality of animating/fading-in the scrollbar only when you start scrolling, and then when you hover over the scrollbar, it gets wider. Right now if I try to style it using these methods, it is permanently present. Do I need custom JavaScript to do this or is there another way?
I just want to change the background image of all the scrollbars, but have it still work like all the existing mac scrollbars.
I don't have a pure CSS solution for you, I tend to do this in JS with the use of a custom scrollbar library (not affiliated with me).
Once the library is added you can simply use the following jQuery to initialise it:
$('.container').mCustomScrollbar({
theme: "dark-3", // some theme examples: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
autoExpandScrollbar: true, //options list can be found here http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section
autoHideScrollbar: true
});
Here's a working example below:
$('.container').mCustomScrollbar({
theme: "dark-3",
autoExpandScrollbar: true,
autoHideScrollbar: true
});
.container {
width: 200px;
height: 100px;
overflow: hidden;
background-color: #fafafa;
padding: 10px;
border: 1px solid black;
}
.container p {
margin: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet" />
<div class="container">
<p>This is a test 1</p>
<p>This is a test 2</p>
<p>This is a test 3</p>
<p>This is a test 4</p>
<p>This is a test 5</p>
<p>This is a test 6</p>
<p>This is a test 7</p>
<p>This is a test 8</p>
<p>This is a test 9</p>
<p>This is a test 10</p>
<p>This is a test 11</p>
<p>This is a test 12</p>
<p>This is a test 13</p>
<p>This is a test 14</p>
<p>This is a test 15</p>
<p>This is a test 16</p>
<p>This is a test 17</p>
</div>
What script should I use to create a clickable selection/deselection function to change the font color for a large set of different elements? I don't have too much experience with web development. This is probably trivial to implement, but I don't know where to start or what the best solution might be. I hope my use case is reasonably clear. The code might look something like this:
<!-- CSS -->
.selection {
color: #E5E5E5;
}
<!-- HTML -->
<element selector="k1">Select/Deselect Keyword 1</element>
<element selector="k2">Select/Deselect Keyword 2</element>
<p class="k1">Keyword 1</p>
<p class="k2">Keyword 2</p>
<p class="k2">Keyword 2</p>
<!-- JS -->
var array=[];
$('element').click(function() {
$(this).toggleClass('selection');
$var selection=$(this).attr('selector')
if($(this).hasClass('selection');
...
$('.k1')...
$('.k2')...
}
A bit tedious, but I worked out a solution (JSFiddle):
<!-- JS -->
$(function() {
$('k1-x').click(function() {
$('.k1-y, .k1-x').toggleClass('k1-y k1-x');
});
$('k2-x').click(function() {
$('.k2-y, .k2-x').toggleClass('k2-y k2-x');
});
});
<!-- CSS -->
.selector {
cursor: pointer;
}
.selections {
color: red;
}
.k1-y, .k2-y {
color: blue;
}
<!-- HTML -->
<div class="selector">
<k1-x>Toggle Keyword 1</k1-x>,
<k2-x>Toggle Keyword 2</k2-x>
</div>
<br>
<div class="selections">
<span class="k1-x">Keyword 1</span>,
<span class="k2-x">Keyword 2</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}
This question already has answers here:
hover on child without hover effect on parent [duplicate]
(2 answers)
Closed 7 years ago.
I have a fiddle: http://jsfiddle.net/a80h6pts/1/
<style>
.myhover {
width: 120px;
}
.myhover:hover p{
color: #FED242!important;
}
</style>
<div id="divParent" class="myhover">
<p>Some text</p>
<p>Text text text</p>
<div id="divChild" class="myhover">
<p>Example text</p>
</div>
</div>
When my mouse activates the over for #divParent, I want all <p> tags to change color except for the <p> inside #divChild. Then when I move my mouse to #divChild, I want all <p> tags inside it to change color and the <p> of #divParent back to their original color.
I cannot remove or change the class .myhover or use javascript. How can I do it only with CSS?
EDIT:
Badly, some people think i have to use js. I can use js (jquery) with a minimal impact on html/css.
With jQuery you can use:
$('#divParent').mouseover(function () {
$('#divParent > p').addClass('hover')
}).mouseout(function () {
$('#divParent > p').removeClass('hover')
})
$('#divChild').mouseover(function (e) {
e.stopPropagation();
$('#divChild > p').addClass('hover')
}).mouseout(function (e) {
$('#divChild > p').removeClass('hover')
})
.myhover {
width: 120px;
}
.hover {
color: #FED242;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divParent" class="myhover">
<p>Some text</p>
<p>Text text text</p>
<div id="divChild" class="myhover">
<p>Example text</p>
</div>
</div>
As others have already noted, since there is no parent CSS selector you can't use CSS alone.