Each product has multiple variants, which are linked to different thumbnails.
I can click to each thumbnails to preview it on a bigger size
I would like the border of the active thumbnail to be more visible.
I have tried these codes with :active and ::selection but it doesn't work .
.productThumbs li img::selection {
border-color: #ee0a3a !important;
}
.productThumbs li img:active {
border-color: #ee0a3a !important;
}
I have little experience with :active or ::selection attribute
Link of a product page: https://www.tresor-ethnique.com/collections/africain/products/boucles-oreilles-fleur-etoilee?variant=6090700914718
You're looking at the wrong CSS selector. Also, :active has an entirely different meaning in this context. It means a link that's currently being activated by the user (think of a link currently being moused down on): Read more here.
The selector you want is this either:
.productThumbs li .active
or
.productThumbs li .active img
This would make your statement look like this:
.productThumbs li .active img {
border: 1px solid #ee0a3a;
}
Or instead of using border: 1px solid #ee0a3a; you can use box-shadow: 0 0 0 5px #ee0a3a; if you want an easy way to have a larger border without the photo size shrinking.
Related
I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.
I was trying to build a menu for a website, and I used this code:
nav#menu:hover li{
background-color: #606060;
}
However, when I hover over the list items on the site, the code changes the background color of every single one of them, not just the one I have my cursor on, does anybody know what I should do?
This should fix it
nav#menu li:hover { background-color: #606060; }
You had hover on entire menu and not its individual li tags.
I cant for the life of me figure out how to style the bootstrap dropdown menus using CSS.
I can manage to get the background color to change but that's it. The links don't have an underline and the Hover background colour does not change. I haven't even started with the down arrows yet either!! Any advice?
Heres the code im trying:
#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}
Hopefully this helps.
ul.dropdown-menu {
border-bottom: 5px solid #CCC;
}
.dropdown-menu li:hover {
text-decoration: underline;
}
I was a little confused what you wanted to do with the background-color of the list items in your dropdown menu. Here's an example of one way to change the background color when hovering over each link. Using !important after a CSS attribute might help in some circumstances when you want to override any subsequent rules (but it might not be the BEST way to do this).
I recommend opening up your Chrome dev tools and playing around a bit until you get the desired results. I'm assuming you want to change the background-color of your list items when hovering to a different color than what you specified (#273961) since it is already that color to begin with?
.dropdown-menu li a:hover {
background-color: red !important;
}
I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:
$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('' + item.name + '')
.appendTo(ul);
};
So my <li> items contain links.
Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):
ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}
ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}
ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}
However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
You can see that the computed style for the active <a> element is the blue color, however the item itself has white background. What is this white thing that I should style?
I have already tried various selectors like .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover and others.
Note: the border: none; rule from the ul.ui-autocomplete li:hover a actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.
Looks like the link in the list item has a background-image set. This will override any background colors you use.
You can set the background-image: none for that particular link
Something like:
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
background-image: none;
}
Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/
I want to give separation between the list of menus in the site.
How to display horizontal lines between each menu items in this site
I want something like this :
We used the below code in menu.css
.em-catalog-navigation li { border-bottom: 1px solid #cecece; }
Strange thing is that it didn't work for me.
Let me know if you need any clarifications.
There was already a style for the parent li [BOY TOYS] so have used that to target the items you wanted
.em_nav .menu-item-hbox .menu-container .menu-item-text.menu-item-depth-3 > ul > li {
border-bottom: 1px solid #cecece;
}