links not clickable after using pseudo - html

i got problem, i created hover animation for border, but problem here is that all links (a href's) that are in that DIV aren't clickable after animation is over, is there way to exclude them or do something to make that clickable at all times?
Here is a Codepen
All comments are much appreciated, thanks in advance.
so this is my structure setup
<div class="container">
<div class="row">
<div class="col-lg-4 image-cover">
<div class="first">
<div class="read-more">
read more>>></div>
<div class="date">
<p>date</p></div>
</div>
</div>
</div>
</div>
style is big so i can't paste it here, if you can check codepen

Your pseudo-elements are being drawn over your links, so you're actually clicking the pseudo and not the links bellow.
You need add either pointer-events:none; or z-index:-1 to your pseudo-elements
.first {
&::before,
&::after {
pointer-events:none;
/* OR */
z-index:-1;
}
}

What's happening is that your pseudo elements are drawing over your original element, so if you mouse over the links, you're actually just mousing over your ::before and ::after. A simple fix would be to add the following line to your pseudo selectors:
&:hover::before,
&:hover::after {
pointer-events: none;
}
This makes the mouse ignore those elements, allowing clicks below on your links.
More about pointer-events: MDN

Related

Change another div on hover which is not sibling nor child

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.

How can I toggle/animate a <div> by hovering on a <a> S

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
}

Nested divs of same class, show child on hover

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;
}

How can I activate the CSS hover state of an element below a block of text (w/o Javascript)?

I have a grid of elements over which I have an h1 text tag. Each of the grid elements has a hover action, and I would like to activate that hover action for the grid elements below the text. However, I cannot put the z-index of the grid elements higher, as that would obscure the text.
A basic idea of the html: (and here's an actually useful JSFiddle link: http://jsfiddle.net/evd3v/)
<div id="background" class="header">
</div>
<div id="overlay">
<table>...</table> <!-- A grid that covers the background image -->
</div>
<h1 id="title" class="title">My Page Title</h1>
<h2 id="detail" class="title">Designed by Me</h2>
You can make the h3 ignore mouse (pointer) events with
h3{ pointer-events:none; }
but this only works with FF/Chrome/Webkit
Set the background of the grid elements to background: transparent and then give them a higher z-index?

Changing element style on sibling hover with CSS

I have the following structure:
<div id="e1">
<h1>Header</h1>
<div id="main">text text text text</div>
<div id="footer">something</div>
</div>
And I want the <h1> to turn blue for example when the footer is hovered. I know I can do it with Javascript but I was wondering If you might know some CSS trick to do it without.
Thanks!
Your h1 comes before #footer, so it's not possible with pure CSS as it doesn't provide a selector to match the preceding sibling element.
#e1:hover {
color:red;
}
#main, #footer{
color:black
}
Another option.
I've implemented it in a way, not changing html structure, and pure CSS.
see it in jsfiddle: http://jsfiddle.net/ijse/dhcqw/