I'm working on a Joomla template, I've changed the top level menu colors to match our logo but I'm having trouble locating where the change in color is coming from when you mouse over the dropdown menu. I set the top level menu item to hover using firebug so it stays open though when I inspect the drop down elements I cannot see from where the color change is coming from. I've set hover states on each subsequent div and li and that did not trigger the change in color so I'm baffled as to where the color change comes from. This is the webpage I'm working on http://www.webchild.com.au/search-results
I think it your case menu backgroud color is an image located here:
http://www.webchild.com.au/templates/yoo_mellow_July2012_Wider/css/variations/../../images/variations/bluegrey/menu_level1_item.png
You have a Javascript updating the color for the class hover-box1, check that...
Related
There's an issue with select dropdown box, cause when i scroll down through the items, each item got grey background color (which is normal), but once I removed the mouse from the item to the outside of the dropdown, the last item stayed colored in grey, which is abnormal.
Is there a way to fix this issue, using one of the parameters onmouseleave or onmouseout ?
i tried to use other tags but still not working !!!
For example in a online website editor there is a color picker and you select a new color for the hover element. Then you go to the preview and the new hover color does not display because the mouse was not hovering on the element at the time of the setting/color change. So the preview can only be seen by saving and refreshing completely. How do you make the jquery do the css update for all elements that have the correct css/pointer to the element?
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
On a website I'm working on I got images inside a container that need to appear over the text on hover. This works smooth BUT..
Whenever an image appears it stays in the same location as the previous hover. I am trying to make the images only appear over the link it is associated with but it won't work.
I have some JavaScript running to randomize the link colors.
You can find the webpage in action over here:http://bravenewfashion.com/menu.html Its on the tab titled 'Biology meets Fashion'
Thanks for the working example. If you nest the image inside of the a tag, it will automatically position itself next to the link. You can then add some rules for top and left to position them over the link like your website does now.
Working JSFiddle Here
On my site, I have a sticky navbar that is always positioned at the top of my site, so even as you scroll down, it's still visible.
It's also transparent, and just contains some black text.
The problem is that on my page, there are several divs with varying background colors. So as I scroll down the page, the text in the nav looks fine as I overlay divs with lighter backgrounds, but it's really hard to read on darker ones.
I figure I have two options:
Change the nav text color based on if I'm overlaying a div with class "dark"
Change the nav text color based on the background color of the div beneath it.
Are either of these possible? Or is there another option I'm not aware of?
I just read about Midnight.js, a jQuery plugin that allows you to use data-attributes on the elements you scroll over to define how your navigation should look. Might be worth to give it a look.
Check out jQuery Waypoints. It's perfect for your problem. You can specify exact waypoints so that the moment a differently colored div hits your menubar, an event is fired. and in that event you can change the menubar color. And then you'd have another waypoint at the bottom of that div so you could reset the color.
http://imakewebthings.com/jquery-waypoints/