I am using a website template, have gone through much of the style sheets and have used the f12 function in chrome. However, the button is ONLY blue when highlighted so I am really struggling to find it and turn it red. Is there a way to keep it blue so I can find it that way or should I look somewhere else?
"Purchase Now" is blue when highlighted
You can try in the Chrome dev tools (F12) you can use "Force element state" to cause an element to behave as though it is hovered. When you have the button element selected, look for ":hov" in the "Styles" tab within the main "Elements" tab. That should let you toggle the :hover state. Hopefully that can let you see the button when it is blue to investigate some more!
Related
I'm using twitter bootstrap (v3.3.7) and the following button was displayed just fine:
Open
After clicking on a link like this
File
the font-color of the button turns black. Reloading does not help, i have to delete all history data, cache etc.
This problem occurs in Firefox and Chrome, but not in Safari.
Does anybody have an idea what could cause this problem?
I hope it's possible to fix this without overriding the styles of the button.
EDIT
to clarify: the second link is not the same as the first one. So the style of the first button (a styled a-tag) changes after clicking on an other a-tag. In the developer tool it says that the font of the first button should be black, but it is white and therefore invisible, as the button is white, too.
It's not possible without overriding the styles of the button. What you're seeing is a:visited at work. You need to override this CSS rule to be the same as the unvisited a in order for the link to look the same both before and after.
Firefox 46.0.1. I'm using the inspector. I'm a beginner. When I move the mouse around, I get a blue box around the element. I would like to stop the movement so I can use my mouse to move about the lower info boxes.
I found a way of doing this before, but cannot find it now via google. I know this wasn't done via a breakpoint. It was some key press.
answer:
Ok, click on the box with arrow in it; it's on the upper left margin. It turns blue. Move mouse to where you want. Left click. The blue box goes away, but the text below stays frozen.
Supposedly, the answer is here:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
Robert
What are stuck in is often referred to as "Point to Inspect" mode or "Inspect Element" mode. In many browser developer tools, this mode is entered via application menu item, right click context menu, or a button in the developer tools UI. The idea is to help the user see the hovered element in a DOM tree visualization.
Usually, this mode is active until the next left click. When the user left-clicks on an element, it is revealed in the DOM tree view. (Some tools also log the element to console.) So, to get out of the mode, simply click on some element to select it.
I've got an issue with my buttons and I don't know where the CSS is. If you look on my site, http://www.gnarlydigital.com/services, you'll see a button with 'Start your project>>'. When you hover over the button, the button looks like it's been pressed. If you click and hold then the button gains an inner shaddow and the border at the bottom appears again.
How can I fix it so that the hover and the press and hold states are the same?
Thank you.
Thanks Richlewis, I've spotted it. One of the problems was seeing the active state, but this post answers it perfectly.
See :hover state in Chrome Developer Tools
I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.
Is there any way to view the styles applied during hovering of an element in Internet Explorer? Chrome and Firefox provide this in styles tab as we can see in console bar.
I want to know whether the same thing can be viewed in Internet Explorer. If so how?
Once you've pressed F12 and selected the element in question, you will be shown the CSS styles on the right - this does not however update when you hover over the element like in FireBug - nor can you set it's state as ':hover'. What you can do, is once the element is selected, ensure the focus is on the developer bar and hover over the element on the page - while hovered over it, press F5 - if you now reselect that element, the styles on the right hand side will show you the :hover styles ("Trace Styles" will also update)
In IE, you just press F12 and it will bring up the Developer Console. There you will find a CSS Tab.
Or after bringing up the Developer Console ( F12 ) you can use the pointer tool to highlight an element on your page and you will view the element Styles on the right pane of the Developer Console
http://www.sitepoint.com/debug-faster-with-f12-developer-tools-in-internet-explorer-9/
You can navigate to,
Tools >> DeveloperTools
Shotcut- F12
go to InternetExplorer menu : ->Tools->Developer Tools Shortcut : f12