Hi, been setting up a mediawiki to port my aging twiki for 3d animation tips, all going great so far:
http://www.tokeru.com/mayawiki/index.php?title=Main_Page
One thing I'd like to do though is hide the '[edit]' links, and only have them appear when users hover over the title. Similar to the direct link icon that appears for the python documentation pages (open the following link, hover on the titles, a red '|P' link appears to allow users a direct link to that section) :
http://docs.python.org/2/library/os.html
From inspecting the mediawiki pages it appears I should be able to use the
mw-headline:hover to affect mw-editsection. Unfortunately I can't make it work. I can make mw-headline:hover affect itself, and mw-editsection:hover affect itself, but not one affecting the other. Here's what I'm trying:
.mw-editsection { display:none; }
.mw-headline:hover .mw-editsection{ display:inline-block; }
I've tried variations with #, span, spaces, no spaces, but clearly this is beyond my limited css skills.
Any ideas?
Cheers,
-matt
.mw-headline and .mw-editsection are sibling elements; the syntax you're using would only match if the former was an ancestor of the latter. (Or in other words, <span class="mw-headline"></span><span class="mw-editsection"></span> vs <span class="mw-headline"><span class="mw-editsection"></span></span>.)
You would normally use the CSS sibling selector: `.mw-headline:hover + .mw-editsection { … }` (note the '+'), however that is not going to work well here because, to click on the section edit link, you would have to "un-hover" the headline text itself.
I think you'll have to use the parent hN elements here, listing them all: `h1:hover .mw-editsection, h2:hover .mw-editsection, h3:hover .mw-editsection, h4:hover .mw-editsection, h5:hover .mw-editsection, h6:hover .mw-editsection { … }`.
Aha, that works great, thanks!
On 21 March 2014 21:24, Bartosz Dziewoński matma.rex@gmail.com wrote:
.mw-headline and .mw-editsection are sibling elements; the syntax you're using would only match if the former was an ancestor of the latter. (Or in other words, <span class="mw-headline"></span><span class="mw-editsection"></span> vs <span class="mw-headline"><span class="mw-editsection"></span></span>.)
You would normally use the CSS sibling selector: `.mw-headline:hover + .mw-editsection { … }` (note the '+'), however that is not going to work well here because, to click on the section edit link, you would have to "un-hover" the headline text itself.
I think you'll have to use the parent hN elements here, listing them all: `h1:hover .mw-editsection, h2:hover .mw-editsection, h3:hover .mw-editsection, h4:hover .mw-editsection, h5:hover .mw-editsection, h6:hover .mw-editsection { … }`.
-- Matma Rex
MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
mediawiki-l@lists.wikimedia.org