- This topic is empty.
-
AuthorPosts
-
November 21, 2016 at 4:57 am #248061
Ayala
ParticipantHow should I refer to the first image from the first button?
http://codepen.io/Ayalann/pen/YpZpog
I would like that when I hover on the first button I see the first image (z-index: 3;).
I try this:
.buttons:nth-child(1):hover ~ .images:nth-child(1) {
z-index: 3;
}But maybe if they haven’t the same parent it doesn’t work.
Should I change the html?
November 21, 2016 at 5:49 am #248063Shikkediel
ParticipantMaybe you could add a small fork/demo. ;-)
Although, looking at the title and assuming a continuation of the previous question I’d say it would need a workaround.
November 21, 2016 at 7:03 am #248066Ayala
ParticipantI have one, just I’ve forgotten to share :)
You can check again :)Yes, I want this. Just I am not sure how could I change the html without changing the design. Because my buttons are in a div, but in this way I can’t do what you do.
I am trying..
November 21, 2016 at 7:17 am #248067Ayala
ParticipantOh, I can do it without my .buttons class, I see now.
Thank you!November 21, 2016 at 7:17 am #248068Shikkediel
ParticipantBecause my buttons are in a div
No need to try… can’t be done. With CSS it’s not possible go up the element tree, only down.
There was something in the spec that would make such a thing possible (the subject indicator) but they apparently scratched it from the spec.
Piece of cake with JS of course.
Edit – a late reply without seeing the previous one…
November 22, 2016 at 1:04 am #248090Ayala
ParticipantThere is one problem with this solution. Opera Mini doesn’t support the transform property.
Is there an other solution?
November 22, 2016 at 5:16 am #248098Shikkediel
ParticipantOpera mini doesn’t really support anything though, I wouldn’t avoid transforms just because of this – pretty much every other browser is fine with it.
But you could always just replace it with a
top
value and fixed pixels:November 22, 2016 at 5:24 am #248099Ayala
ParticipantThank you, you must be right about Opera Mini. I prefer transform to fixed pixels. Everything is better than fixed pixels :)
November 22, 2016 at 6:10 am #248100Shikkediel
ParticipantI’m wondering if it might actually look correct anyway. Have you checked live or just the support table?
Reading the below link, it sounds like the page is pre-rendered. While transforms might not have any effect while being active on the site, the original screenshot could still show an good representation.
November 22, 2016 at 6:27 am #248102Ayala
ParticipantI didn’t try, I just looked it here: http://caniuse.com/
But maybe it is still working.November 22, 2016 at 7:09 am #248103Shikkediel
ParticipantI would assume they’re good developers, making a predefined and by now long time supported
transform
look correctly after the snapshot. But one could always try to check with this:Download page Opera Mobile Emulator
From what I read, Opera Mini should be included:
I’ve personally been ignoring that browser so far… hardly ever is the caniuse reference not in the red when I check a particular feature.
Edit – I think the first link is wrong, Mini seems to need another file that’s rather hard to find.
November 22, 2016 at 12:59 pm #248118Ayala
ParticipantThanks for the idea.
I downloaded it, it will be useful in the future as well.
The demo is working.
Is it really the Mini Opera? Not simple Opera?
Is the Mini Opera the mobile version of Opera?November 22, 2016 at 1:09 pm #248119Shikkediel
ParticipantI think there’s two mobile versions of Opera – Mini and regular Mobile. The first one is specialised to restrict bandwidth usage and energy consumption by sending the request through a special server and minimising these footprints. So active animations and what not are disabled on Mini only. The caniuse specs may be a bit misleading because of this.
And then there’s desktop Opera of course…
Some of the links I tried did not lead to the expected download before. I think Opera was taken over not too long ago (by a Chinese consortium).
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.