specificity

[Colic]

I have some Joomla generated css as follows :

ul class=”joomla-nav”>
li id=”current” class=”selected item435″>
a class=”rocket-home” href=”/”>
img alt=”Home” src=”/images/home.gif”>
/a>
/li>
/ul>

I would like to add an image on hover, except without referencing class “item435” as this changes between templates, or ID “current” as I want the rollover image even if the class isnt current (which just means the menu item has been selected).

In the template CSS there is :

.joomla-nav li a:hover

Which needs to remain for the other menu items.

So I thought I could do what I want with :

.joomla-nav .rocket-home a:hover

but Im wrong and it is ignored (much to my surprise). But I cant figure out how I can do this, if it can be done (without editing core files, ie purely with my CSS overrides).

As a test,

.joomla-nav .item435 a:hover

does work, but only by referencing a class that will not always be there.

Can anyone help me out please?
thanks

[wolfcry911]

.rocket-home is the anchor’s class – the anchor is not a descendent of that class. That is why your selector was ignored. Try this:
.joomla-nav a.rocket-home:hover { }

[Colic]

> the anchor is not a descendent of that class

Thankyou very much. That did work (you wont be surprised at that!).

Let me make sure I have learned something here – so my selector would never reference anything, that is it was invalid in all situations, even if there were no joomla-nav selector elsewhere, because the selector is looking only for descendants (ie an anchor) of my rocket-home class. But it has none.

Do I have this right?

thanks again.

[wolfcry911]

That is correct ;)

[Colic]

Thankyou :-)

It appears I have more learning in this area ….

While the above does work, the rollover effect only works if my images have transparent backgrounds> That’s because one image is overlayed on top of the other. Maybe this is how rollover works (news to me), but with the above CSS if the non-rollover image is made with a solid background, the rollover never appears, even though I know its working from doing it with transparent images (and indeed I can see both the base and the rollover images on rollover).

Is this how it works? It cant be right or rollover images would never work correctly? What am I not getting here?

The other odd thing I notice is firebug does not display the rollover css, but just the base image CSS – even when I can see the rollover is working (ie when the images are overlaid both with transparent backgrounds). Of course it cold just be a “feature” of firebug, but I suspect its a feature missing from my comprehension of the CSS around all this.

[wolfcry911]

do you have a link you can share?

[Colic]

I dont unfortunately because its only on an internal server with all sorts of stuff on it. Its really strange, the hover definately works – if I put a different width on the over CSS, the menu items shift along on hover as Id expect.

Can I paste some more CSS or any screenshots that might help? Im assuming you also dont think both images should display?

[wolfcry911]

to be honest, I don’t have a clue what you’re trying to do (what’s more is I despise joomla).

[Colic]

OK, well I have it working but I dont know why (which is a “fail” in my book!).

Following this tutorial http://docs.joomla.org/Image_only_menu_items_with_rollover_effect, I tried a 1×1 transparent image as the base image. The reference to the “base” menu image is placed in the Joomla setup (I dont know if you’re familiar with Joomla, this is a CSS forum after all!). Anyway, Joomla generates the initial CSS code which now has the initial image as 1×1 transparent. Of course my CSS isnt identical (Im using the CSS override as per your suggestion, not the tutorial), but the concept’s the same. And it works.

So now my CSS overrides both the base and hover images, only one of which is ever displayed – well it is almost certainly the case that the 1×1 transparent image is still present, so nothing has changed except of course the 1×1 image is never seen alongside the new base or rollover images.

So, to recap, my original code referenced the proper base image from within the Joomla setup, and it generated the code I quoted previously. This didnt work as that image was always visible even on rollover. Instead it now references a 1×1 transparent image, so my original CSS code quote reflects the now working code except the image reference is of course now blank.gif.

But it still leaves the question of why is the “base” image always there in the Joomla generated code. Why do I need to use a blank image to get the CSS to work, and why is that original image always displayed regardless?

Are you able to enlighten me at all!! ???

[Colic]

Just missed your last post …. yes I can sympathise with your Joomla feelings! But Im really interested in the CSS here, its not really relevant what generated it.

Im simply trying to have an image (a menu image as it happens) that is replaced with another on mouseover. That’s it.

I expected to be able to use my CSS statement to replace the original image on a:hover.

It doesnt do that. It displays the image at the same time as the original.

Hope that’s clearer …. its not really anything to do with Joomla as fas as Im concerned. Im referring to CSS it has generated though, but I could just as well have typed it up myself.

[wolfcry911]

well, I’m even more confused now – perhaps you could set up a pen?
The tutorial you linked to uses background images (which is what I expected) but you’re using a foreground content img…

[Colic]

Ill see what I can find out.

[Author]

Posts