I am doing some custom CSS & I am trying to create sub-categories to show when mouse hovers on the Icon & the Heading.
I was able to achieve the hover effect when you mouse over the icon but have spent two days but no luck with the heading.
Please see this screenshot for easy understanding.
Here's the code
/*this doesnt work*/
.cnt-box-side-icon > .caption h2:hover + .caption p {
display: block;
}
/*this works*/
.cnt-box-side-icon i:hover + .caption p {
display: block;
font-size: 14px;
}
.caption p
{
display:none;
animation: fadein 1s;
}
Thanks in Advance!
Ashish
From your screenshot, I can see in the inspector that the h2 and p elements are siblings. Your selector should be:
.cnt-box-side-icon > .caption h2:hover + p
Browsers read selectors from right to left. This selector reads as:
a p elementthat is an adjacent sibling of an h2 element with a hover pseudo-classthat is a descendent of a caption classthat is a direct child of a cnt-box-side-icon class
Read more: CSS selectors (MDN)
Related
This is likely something I am just stupidly overlooking, but would you please tell me why hovering over the second division element doesn't cause the background color of the first letter to change to rgb(50,50,50) from rgb(150,150,150)?
Hovering over the first division, which starts out with no styling on the first letter, reacts to the style changes upon hover. But the second division, which starts out with the same styles that the first displays upon hover, does not change to the darker background upon hover.
I'm using the latest version of Firefox developer edition. I see now that it works in Chrome; so must be a Firefox issue.
Thank you.
div > p:before { content: 'This text.'; }
div:nth-child(2) > p::first-letter,
div:first-child:hover > p::first-letter
{
float: left;
padding: 0.5rem;
background-color: rgb(150,150,150);
}
div:nth-child(2):hover > p::first-letter
{
background-color: rgb(50,50,50);
}
<div><p></p></div>
<div><p></p></div>
This snippet works in Firefox. It seems that to get the ::first-letter to be styled both without and with :hover a letter has to be there apart from the content added by :before or :after.
div > p:after { content: 'his text.' }
div > p::first-letter
{
float: left;
padding: 0.5rem;
background-color: rgb(150,150,150);
}
div:hover > p::first-letter
{
background-color: rgb(70,70,70);
color: white;
}
<div><p>T</p></div>
I applied #Sydney Y's solution to the above snippet just to show that it works in Firefox. I don't think it is an isue of the :hover not being recognized because the snippet above recognizes it. It appears to be an issue of not including the text added through :before { content: ... } such that there is a first letter to which to apply the style. But adding no content on :hover using :after seems to alter that and works for variable content.
I realize that this of little interest to anyone who doesn't want to use drop caps and change their style based on hover.
div > p:before { content: 'This text.' }
div > p::first-letter
{
float: left;
padding: 0.5rem;
background-color: rgb(150,150,150);
}
div:hover > p::first-letter
{
background-color: rgb(70,70,70);
color: white;
}
div:hover > p:after { content: ''; }
<div><p></p></div>
Yep, just some mix-ups, your accessors are correct. Each block of CSS needs to apply to both divs:
div > p:before { content: 'This text.'; }
div> p::first-letter {
padding: 0.5rem;
background: red;
}
div:hover> p::first-letter{
background: black;
}
div:hover > p:after { content: ''; }
Thanks for the snippet, that's cool!
Edit: getting closer! Code is updated. Still attempting on Firefox.
Edit: Solved, kind of. It works, but it's kind of a hack. The
issue: In Firefox the hover doesn't trigger a repaint in this specific
instance, so I added an empty bit of content on hover because the
:after or content seem to have a kind of a hook. You may be able to
achieve the same thing with a different hack other than content.
But good news is: this works in both Chrome and Firefox.
Awesome problem. I can't imagine ever coming across this issue again, but it was super interesting to troubleshoot.
There is a bug in firefox that nth-child() is not going to work on syntax that's why it is not working. Anyway if not want the same functionality as first one with different color this can be done with you just need to put hover in front of this code
"div:nth-child(2) > p::first-letter,div:first-child:hover > p::first-letter ". I hope this will help. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
My site is test06.menchasha.ru. I am trying to apply a hover effect. A div in the right should appear when the link, 'Promotional Activities' is hovered.
Example
I used the following code:
.child1 {
display: none;
}
a .title1:hover + .child1 {
display: inline-block;
}
But the hover effect is not working. What should I correct?
Thank you in advance!
I've checked the code in your link - you simply can't achieve the effect you need with your structure and only with CSS.
Here is your code:
a .title1:hover + .child1 {
display: inline-block;
}
If you want it to work the way you need your a element must have 2 children: .title1 and .child1, also .child1 must be direct sibling of .title1 cause + selector helps you to access only the nearest sibling of the element. But in your structure all the .child elements are not siblings of .title elements, they are in another div block. So just use JS to make them visible on hover.
i want to make a dropdown menu on butto hover, but when hovered, the effect
are not applying to any other element like div or body.
this is the code
here is a link to my code if you really like to dive in search for dropbtn:hover
.dropbtn:hover .dropdown-content {
background: green ; //tried !important also not working
display:block;
}
Your dropdown-content is not a child of your .dropbtn, so .dropbtn:hover .dropdown-content won't work.
You could use + selector:
&:hover {
& + .dropdown-content{
background: green;
display:block;
}
The selector is no good, .dropbtn:hover .dropdown-content, means that your .dropdown-content should be contained by .dropbtn, in the HTML they are next to each other. You should change the HTML to make .dropdown-content child of .dropbtn, or you could change the selector into .dropbtn:hover + .dropdown-content
On the page biztone.co, in the left sidebar, I am trying to display social share links in a div(.item .details .post-meta), when the main div(#sidebar .recent-post-thumb li) is hovered. I've kind of got it working, except the div(.item .details .post-meta) appears in the box below the hovered box.
Here's the css script I have added to get it to work. But, I need help figuring out why it's displaying in the box below and not the box being hovered..?
.item .details .post-meta { display:none; }
sidebar .recent-post-thumb li:first-child:hover + .item .details .post-meta {
display:block; }
sidebar .recent-post-thumb li:hover + .item .details .post-meta {
display:block; }
Any help is greatly appreciated and will teach me something new.
#sidebar .popular-post-thumb li:hover .post-meta is what you need for a selector instead of going to the next dom element with the +
Change sidebar .recent-post-thumb li:hover + .item .details .post-meta to
#sidebar .popular-post-thumb li:hover .post-meta
It's because of the + sign: it targets the next element.
Remove it and it will target the .post-meta element inside the currently hovered li.
I'm trying to expand the width of my h1 tag when you hover over the img, however I cannot seem to get it to work.
http://jsfiddle.net/xJ4dc/
Thanks.
Try this:
img:hover + h1 {
width:100%;
}
jsFiddle example.
This rule says that whenever you hover over an image, change the width of all adjacent sibling <h1> elements to 100%.
The Selector has to select the element for it to apply the rule.
In your fiddle img:hover has no desendant h1 therefore nothing happens.
In this case, since h1 is the next sibling of img:hover you can use the + selector
img:hover + h1
fiddle
you need to understand what img:hover h1 says:
upon all tags named img on :hover all child elements tags named h1
you would need to use the plus sign img:hover + h1 to work.
But I would suggest do is http://jsfiddle.net/xJ4dc/5/
<ul>
<li>
<img src="http://www.real-whitby.co.uk/wp-content/uploads/donkey.jpg" />
<h1>This is a heading</h1>
</li>
</ul>
and then:
li img {
width: 100px;
}
li h1 {
display: none;
}
li img:hover + h1 {
display: block;
}
Note that I would use display:none; and then display:block to hide and show the heading.
The selector img:hover h1 means "any h1 element that is a descendant of an img being hovered over". The problem is your h1 element isn't a descendant of your img tag, it's a sibling. You can change to using the adjacent sibling selector to get the desired effect:
img:hover + h1 {
width:300px;
}