problems with css hover has no effect

[Funkaholik]

hi guys
broke my head already while trying to solve the problem 0_0
if strong placed before img (in html) then img hover has no effect on strong opacity(
need help

here is a link https://codepen.io/Funkaholik/pen/WGJOqA

[Shikkediel]

It has nothing to do with the strong tags (same if you remove them). I think it’s because you’re trying to select a previous sibling which isn’t possible.

[Paulie_D]

Not quite sure what you are asking but I think you mean that if the strong tag is before the image then hovering the image does not affect the strong.

This is entirely correct behavour. CSS cannot select UP the DOM.

There is no parent selector or previous sibling selector

[Paulie_D]

However, you can fix this but apply the styles when you hover on the wrapper div.

https://codepen.io/Paulie-D/pen/wzXrmW

[Funkaholik]

thanx guys
it partly helps but in general if i’ll set opacity to 0
and hover onto wrapper then empty space atop the image
will also be effected (by hover) and it’s no good at all
i tried to play with display none but then image starts jumping
and as long as wrapper is flexible i don’t see any solutions too avoid this
but it just can’t be true .. is there any other option to solve this?
maybe code it in javascript? or there will be same problems?

[Shikkediel]

It should be easy enough with JS but I’m wondering if there’s another approach yet with CSS alone.

Edit – here hovering the top will prevent the image from rotating:

Demo

.back-right-bottom:hover .back:hover ~ #back-contact-img {
  -webkit-transform: none;
  transform: none;
}

Who else but Chris

Seems to have a glitch on the border (reacts to hovering as well) so I made that an outline instead.

Was the opacity shifting also an issue?

[Funkaholik]

welll .. whole idea was to show text by hovering an image) (changing text opacity)
and text should be displayed at the top of an image
and shouldn’t be visible or be able to appear by hover itself .. thanx a lot
but again problem is partly solved.

[Shikkediel]

Then adding a similar line should solve it, if I get the intention.

.back-right-bottom:hover .back:hover {
  opacity: 0.1;
}

Earlier demo was edited to reflect this.

[Funkaholik]

wheeee .. you got it
http://codepen.io/Funkaholik/pen/JRkJNW?editors=1100
but would it be semanticaly right?

thanx again.

[Shikkediel]

No problem. :-)

but would it be semanticaly right?

I would think so. Nothing is pulled “out of context”, it just defines a nested hover. Overriding previous style isn’t super clean but it’s perfectly valid.

[Shikkediel]

I only noticed a weird effect with Firefox when using outline. It apparently adapts to the size of the rotation. Using box-shadow could be an alternative.

[Funkaholik]

i took off borders anyways
i use them as markers

[Shikkediel]

Alrighty, no problem then. Looks like that because of specificity, the first style rule can be a bit shorter by the way:

.back:hover ~ #back-contact-img {
  -webkit-transform: none;
  transform: none;
}

[Funkaholik]

indeed

[Author]

Posts