I want to change read more button style by adding hover.
I tried some CSS like:
a:hover{
background-color: #077fad;
color: #ffffff;
}
or
div.blmore.rmbutton-center.rmbutton-medium:hover{
background-color: #077fad;
color: #ffffff;
}
But the first approach changes also <a> inside the <h2> paragraph and the other one adds hover to the whole read more button section, except the read more button.
My question is how to select the <a> inside <div class="blmore rmbutton-center rmbutton-medium"> paragraph and how to apply hover effect only to that section?
<div id="bloglist_title">
<h2 class="entry-title">
Title
</h2>
</div>
<div class="entry-content">
<div class="myleft">
<a class="entry-post-thumbnail left" style etc.....></a>
<p>
Short text
</p>
<div id="bloglist_morebutton">
<div class="blmore rmbutton-center rmbutton-medium">
<a style="background-color: #fdc550; border-radius: 5px;"href="my.website.link.com">Read more</a>
</div>
</div>
</div>
/* gets applied to any hovered <a> on the page */
.a:hover {}
/* gets applied to an hovered <a> on the page
within the given class combination */
.blmore.rmbutton-center.rmbutton-medium a:hover {}
/* gets applied to any <a> within an hovered
element of the given class combination */
.blmore.rmbutton-center.rmbutton-medium:hover a {}
The key is the whitespace between two classes or elements, which allows you to represent the nesting of the markup.
Related
My HTML code is similar to this :
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">...</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">...</p>
</div>
</div>
I'm using this in my CSS code :
.btn-1:hover {
.pro {
...
}
}
It works perfectly.
What I want to do now is to modify my .notpro class inside the btn-1:hover. As .notpro is not child or sibling with btn-1, it doesn't work.
.btn-1:hover {
.pro {
... // works
}
.notpro {
... // doesn't work
}
}
Is there a way to do this ?
Thank you !
There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.
You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.
The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.
.navbar:hover + .navbar .notpro {
color: red;
}
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">I am a Pro</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">I am Not a Pro</p>
</div>
</div>
I don't think this syntax is valid in CSS, meaning selector inside another selector.
You can add :hover to the 'pro' to get different behaviour than the parent div.
This question already has answers here:
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 3 years ago.
i want to add some style to the div elements when the div is not of some class
What i am trying to do?
i have a div with class "card". i have other elements in the div like footer, a tag and h4.
now i want to make the a, h4 tag to blue color on cursor hover.
so i do it like below,
.card a h4:hover {
color: blue;
}
But i want to add this style to those a and h4 elements when div has only card class. i dont color blue for a, h4 elements when div has "card" and "disabled" classes.
how can i do it.
below is the html code,
<div class="card">
<div class="footer">
<div class="info">
<a href="somelink">
<h4>text</h4>
</a>
</div>
</div>
</div>
Could someone help me with this. thanks.
Hope you are looking for a solution like this. Adding style to h4 tag on hover under class card and not adding any specific style for div with both card and disabled class
.card a h4:hover {
color: orange;
}
.card.disabled a h4:hover {
color: inherit;
}
<div class="card">
<div class="footer">
<div class="info">
<a href="">
<h4>Card</h4>
</a>
</div>
</div>
</div>
<div class="card disabled">
<div class="footer">
<div class="info">
<a href="">
<h4>Card Disabled</h4>
</a>
</div>
</div>
</div>
You can use the :not selector:
.card:not(.disabled) a h4 { ... }
So. I have an object. If i hover it i want to toggle an animation or just a css change of the div underneath.
I only want to use HTML & CSS no Javascript or something.
You can find the structure in the "code" section.
Thank you for your help :)
<body>
<div>
<a ← THIS IS THE OVER OBJECT>
<div ← THIS IS THE DIV I WANNA ANIMATE>
stuff
</div>
</div>
</body>
You can use the adjacent sibling selector (note that the div must immediately follow the a in this case):
a:hover + div { background: blue } /* this is all that really matters */
<a href='#'>HOVER ME</a>
<div>I AM A DIV</div>
If there's another element between the a and the div, but they're still siblings, you need to use ~ instead of +.
First of all, you need to add a closing tag for your anchor element. After that, you can set the innermost div to animate when you hover on the anchor tag by doing:
a:hover div{
//Animation code here
}
So i have this sort of structure
<div class="about_page">
<hr>
<hr>
</div>
How do i select the second hr tag and style it in such a way that it wont affect the first.
Note that i dont have access to the Html of the code so i cant add any id or class selectors to the code. I also do not have access to write any javascript for the code. I want to use pure css
You can use the :nth-child() Selector.
In your case:
.about_page hr:nth-child(2) {
/* your style here */
}
Via CSS you may take a look at selector ~(difference with child and sibling selectors) and initial or unset values
https://www.quirksmode.org/css/cascading/values.html
The inherit, initial, and unset keywords are special values you can give to any CSS property.
example below is changing the border-color value to the second hr encountered within a container , any content can stand in between first, second and other hr.
hr:first-of-type~hr {/* reset css value after the first hr seen in the container */
border-color: red;
}
hr:first-of-type~hr~hr {/* reset to older value any hr following the second hr from the container*/
border-color: initial;
/* or border-color:unset; */
}
<div class="about_page">
<hr>
<div>something</div>
<hr>
<hr>
<p>some text</p>
<hr>
<hr>
<div>something</div>
<hr>
</div>
works too with just hrs
<div class="about_page">
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
I'm trying to show a hidden div on hover of its parent.
My issue is that there are nested divs of the same class, and when I hover an "inner" div, its parent is also hovered and both their hidden children are shown.
html:
<div class="a_class">
lorem ipsum
<div class="inner">
hidden...
</div>
<div class="b_class">
blahblah<br />
<div class="a_class">
<div class="inner">
hidden...
</div>
lorem ipsum
</div>
</div>
</div>
css:
.inner{display:none;}
.a_class:hover > .inner{display: block;}
fiddle: http://jsfiddle.net/Nb6tD/
In other words, i'm trying to achieve this: when i hover over the second .a_class, only the .inner under it should show up, not the .inner under the "parent" .a_class.
Is it possible only with css?
Thanks in advance
EDIT: the answer
So, it appears it CAN'T be done with pure css, unless the html markup changes - which is not possible in my case.
I wished for a css3-magic solution, but since there's no such option, i'm going javascript.
I accepted the most suitable solution though for future reference, for all out there that have the possibility of changing the html structure.
I don't think you can "fix" this without changing the html structure - you could have an element enclosing the hoverable area and its corresponding button:
Here, i've added a .hoverArea div. (Extra div not needed on the innermost one, as it only contains a single .inner)
html
<div class="a_class">
<div class="hoverArea">
lorem ipsum
<div class="inner">
hidden...
</div>
</div>
<div class="b_class">
blahblah<br />
<div class="a_class hoverArea">
<div class="inner">
hidden...
</div>
lorem ipsum
</div>
</div>
</div>
css
.hoverArea:hover > .inner{
display: block;
}
Demo at http://jsfiddle.net/Nb6tD/7/
It is not possible with pure css because you are hovering on the parent element as well as the .a_class child element then ofcourse it will show you both the blocks.
If you can change the html to some extent then it can be achieved easily.
The changes I have done to html are:
I wrapped the complete html code in .block class element.
closed the parent .a_class before starting of the .b_class element.
CSS
.block, .block .b_class>.a_class {
border: 1px solid red;
padding: 15px;
}
Working fiddle
The problem is that as the second set are nested inside the first .a_class, in effect the first .a_class is still being hovered over when you hover over the second .a_class.
So at that time both elements are interpreted as being hovered, which will trigger the behaviour that is happening.
In this way? (needs some HTML changes)
http://jsfiddle.net/Nb6tD/6/
i {
display: none;
}
.trick:hover > i {
display: inline;
}
It Works for me
You just need to point or access exact tag or class in inner child where you want to apply your css
e.g:
.footer-custom-icons li:hover > .iconlist-item-icon i,
.footer-custom-icons li:hover > .iconlist-item-content p a
{
color: white !important;
}