I have a wordpress website with this free theme: https://wordpress.org/themes/minimal-grid/
I'm seeing some unusual behaviour, which isn't a problem and I can fix by removing the element, but I don't know why it's happening and would like to understand it.
At the end of each post, there is a link to the previous and next post. When I hover over these, the background of the element darkens slightly. Where there is an image as background, it doesn't disappear, just darkens. Here's a page that demonstrates: https://5diraptor.com/todoist-task-project-manager/
The unusual part is there doesn't seem to be any :hover selectors which actually tells it to do this, so I'd like to understand why it's happening. Below is the HTML:
<nav class="navigation post-navigation" role="navigation" aria-label="Posts">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-links">
<div class="nav-previous">
<a href="https://5diraptor.com/vivaldi-browser/" rel="prev">
::before
<span class="meta-nav" aria-hidden="true">Previous</span>
<span class="screen-reader-text">Previous post:</span>
<span class="post-title">Vivaldi Browser</span>
</a>
</div>
<div class="nav-next">
<a href="https://5diraptor.com/wordpress-development/" rel="next">
::before
<span class="meta-nav" aria-hidden="true">Next</span>
<span class="screen-reader-text">Next post:</span>
<span class="post-title">WordPress Development</span>
</a>
</div>
</div>
</nav>
There's no :hover selectors on any of these elements which change background color. However, when I remove the ::before elements in Chrome Dev tools, the hover transition no longer happens.
What I don't understand is there's no :hover selector on the ::before pseudo-element, and there's no color related CSS applied to this - see screenshot. There's also no event listeners for mouseover so I'm pretty sure this isn't Javascript.
I can't force element state to hover for pseudo-elements so I'm not sure how to debug this any further. Can anyone help me understand why this is happening?
See it has a style for the hover state of the parent nav-previous and the rule applies to the pseudo element when it is hovered.
Related
I am trying to create a custom menu component. And I need the consumer of this component to be able to style it from the outside.
I thought the ::part selector would be perfect for this. So I used this in my Sass file:
custom-menu
&::part(navbar-sub-content)
position: absolute
display: none
//it seems not possible to combine part selectors?
&::part(navbar-subnav):hover &::part(navbar-sub-content)
display: block
color: red
(the colour is just for debugging purposes)
And the relevant generated HTML. Keep in mind that this is in the shadowDOM.
<ul part="navbar">
<div part="navbar-subnav navbar-item">
<div part="navbar-subnav-button ">sub-menu</div>
<div part="navbar-sub-content div li">
<a part="a navbar-sub-link li" href="example.com">
sub-1
</a>
<a part="a navbar-sub-link li" href="example.com">
sub-2
</a>
<a part="a navbar-sub-link li" href="example.com">
sub-3
</a>
</div>
</div>
</ul>
For some reason, this does not work as expected. I would expect that, when hovering navbar-subnav, that navbar-sub-content would become visible. But instead, nothing happens. I do wonder if I got my selectors wrong, or that this is a limitation of the ::part selector.
I am creating a website based on Wordpress i am facing a very strange issue with each of the section, that when i apply any style specially the background color it does not apply directly, but when i add CSS property as follows:
.abc {
background-color:red;
overflow:hidden:
}
It starts work fine, and also when overflow property is not applied it not even highlighting the whole area of that section in Debug Mode.
Now the issue with the overflow property is i have some content cutting due to this as you can see in the following image:
And without overflow property the behavior of the section can be seen in the following image:
So now i want the background color to the section as well as to not cut the content as you can see in the first image. how i can fix this any quick solution will be appreciated.
consider the following structure
<header class="header-abc">
::before
<div class="inner-abc-left">
<img src="img.jpg">
</div>
<div class="inner-abc-right">
<ul class="navigation">
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
</ul>
</div>
</header>
Style is like:
.header-abc {
background: rgba(0,0,0,0.5);
position:relative;
width:100%;
display: block;
clear: both;
}
.header-abc:before {
display:inline;
}
So with this style it is not working fine but added an additional overflow property make it work. keep in mind i am using wordpress with some pagebuilder and purchased theme.
Thanks
It is not possible to solve this issue without having a link or a codepen so that we can at least see where this .abc div is located and what is it's relation to the rest of your code.
I have solved it by my own this issue, it was due to a ::before tag to the header tag like below:
<header class="header-abc">
::before
</header>
so the ::before tag was given display:inline style that why it was blocking the style to be applied, now removed the inline property and everything worked fine.
I'm looking to have a div which shows just a h3 tag vertically aligned centre with a background image, which on hover shows a paragraph text block and button instead of the h3 element (so a straight swap) with a quick fade transition.
I can only see to find examples that swap on other elements.
Any ideas? Thanks!
<div class="col-lg-3">
<h3>Service Name</h3>
<p>This is the description of the service which explains what it's all about.</p>
<a class="button">Read More</a>
</div>
You can use CSS transition to give a fade effect. I tried to create something like you asked using just CSS. You can also add the show/hide with jquery. The transition css is from #Guillermo given here.
Check fiddle
Here is what I am trying to achieve:
The button should be connected to the link;
Both, the text and the icon should hover in gold at the same time (now they change the color separately, i.e. if you hover over the icon, this is not applied to the text and vice versa).
The icon should have larger font-size than the text.
Here is the link to my HTML and CSS: http://www.cssdesk.com/pkVpY
Thanks so much!
<div>
<i class="fa fa-file-text-o events_icon" aria-hidden="true"></i>
<a class="events_btn" href="http://www.google.org/"
target="_blank"
style="color: white; text-decoration: none;">
VIEW ALL EVENTS
</a>
</div>
Change the Html like this, so that the icon and text are all clickable. The way you have it now, the text is clickable, but folks cannot click the icon.
The layout should be like this:
<a class="some-class">
<i></i> <!-- the icon -->
<span></span> <!-- the text -->
</a>
Now keep in mind that <div> is display:block by default. <a> is display: inline by default. You will need a CSS rule on the <a> to make it display:block.
You can use direct child selector to affect all the children.
Instead of .events_icon:hover {}
Use .some-class:hover>i{}
For the text use .some-class:hover>span{}
Assuming you want to hover on a div containing two directs elements ( icon + text ) and that hover has the effect of colouring those items within and with a specific color:
The selectors:
.text-iconed – your div containing the elements
:hover – pseudoclass with hover effect
> – this chevron is selecting the direct elements ( same level ) under the current element ( == .text-iconed div )
* – all == selecting all elements
Meaning:
"on this .text-iconed div hovered, take all direct children and color them"
<!-- HTML -->
<div class = "text-iconed">
<i></i>
<a>VIEW ALL EVENTS</a>
</div>
// CSS
.text-iconed:hover > * {
color: gold //color property is applied to svg too.
}
Add your icon element inside the anchor tag.
Let's say I have a navbar with links:
<div class="navbar-inner navlinks">
<ul class="nav">
<li><a class="brand" href="#"><img src="img/logo.png" /></a></li>
<li> Accueil</li>
<li> Ouvrez</li>
<li> Decouvrir</li>
</ul>
</div>
This is made using Twitter Bootstraps, so the links sit within the navbar container and are all floated left as block elements, as you see in the typical navbar. The entire navbar has a background color of blue as defined in my navlinks class. It has a height significantly taller than the text of the links.
What I want is for the links to change the background color of their entire "area" when they are hovered over. Right now, when I add a hover option and a background color change, it only changes the background area over the text where the link is, which is barely noticeable. I want it to also change the color of the space above, below, and to the right of the text before the next link. I thought twitter's treatment of this as a block element would do that, but it doesn't seem to be working.
Or, you can define the height of the nav by adding padding to the 'a' tag, instead of the 'li', and then using the regular #menu a:hover.
I am not sure what you are really asking, but if you are adding a hover to the anchor a:hover maybe you just need to use the hover on link li:hover{}