Im trying to add a background color behind the "store" menu item however I have tried many ways and are not able to only make the "store" item change the background.
background color change to: #37bbec, and also change the font color to #fff.
I have attached a image of the menu item I wish to change.
As a general principle, you could target it with this basic construct:
ul li:first-child a:first-child { … }
But you can deal with ids, classes and specificity as needed.
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
While trying to make a social bar side-menu I added a hover effect when if hovered the list item would pop out to the left. But for some reason when hovering any list item every other pops out also. I was searching for a solution but sadly didn't find the answer to this problem.
Codepen
you have 2 solutions :
Apply the hover property for the link instead of the li item.
Build a css class for width & margin-left and use jQuery to load it once li item is hovered.
I've made a fast jQuery function :
$('.social-nav-item').hover(function(){
$(this).addClass("link_hovered");
});
https://codepen.io/anon/pen/QoNXZL
Pure CSS to li item :
.social-nav-item:hover{
width:200px !important;
margin-left:-150px;
}
I just want the letters of the link to change color when user hovers on the link with their mouse.
Is this done by just using the a (for anchor) selector when selecting the element in css?
I don't want anything but the letters changing color.
https://jsfiddle.net/sa16pm5g/
I'm your link
a:hover {
color: black;
}
Insufficient information to give any other answer.
It's always the little thing that get me unstuck. I'm trying to make a hover on a navigation element effect 3 elements. The background colour, the text colour, and the small arrow below the text.
The background colour is easy enough, but the text colour only changes when you hover over the actual text - not the whole block element (framed by the background colour). Also, I wanted to image swap the little arrow beneath the text as well. Example:
Here is the site:
MACI test website
I've read up on adjacent and sibling selectors - but I can't quite get it to do what i want. It's probably really obvious, but I can't see it at the moment!
Any help would be appreciated :)
Put the coloring on the link instead of the li, and make the link a block element to fill up the li area:
ul.menu a {
display:block;
background-color:#FFFFFF;
}
ul.menu a:hover {
background-color:#AE242A;
color:#FFFFFF;
}
Also, you could put the arrow image as a non-repeating background image for the link, and set a different one for the regular link and the hover link.
Another thought, have you tried:
ul.menu li.nav-links:hover a.nav {
color:#FFFFFF;
}
I have inherited a wordpress site using a theme. There is a background color on hover in the portfolio section of the site that we want changed. I cannot find where this color is declared at so I can change it. I thought it was an element called gallerySelectorList but nothing I did changed the color. The demo site of this theme is here : http://demo.pixelentity.com/?surreal
If anyone can help me that would be great I am losing my mind trying to track this thing down and change it. I posted on the creator of the theme's forum but got no where.
Within the Chrome Developer Tools you can invoke the :hover state of any element. In this case, you want to do so for the li wrapping the link. When do we do this, we see the color is set here:
.gallerySelectorList li:hover {
background: #83103e;
}
This code is located within your HTML file:
It looks like it's not actually a hover, but more so being faded in background color. Found then pink color in the class thumbTextWrap.
.thumbImage .thumbTextWrap { background:#8b133c; }
When I changed that or removed it changed the background hover color as needed in the dev tools.