So the final result I am trying to achieve is only show .panel-text when user hovers over panel. In this case I tried the overlay CSS class, since it covers the entire div. Yet whatever I do either the text doesn't show at all no matter hovering or idle or the text is displayed always. Below is what I have tried.
.panel-text {
display: none
}
.panel-overlay:hover .panel-text {
display: block
}
The above only hides .panel-text always. Another attempt at it is below:
.panel-text { opacity: 0; }
.panel-overlay:hover panel-text { opacity: 1; }
Now I have attempted to try .panel-title as well .panel-button .
Any help is greatly appreciated, all other posts shown display what I have been using. Even if we have to display an icon when .panel-text is hidden could work out.
Somwthing link this is what should happen
Link
Do it in this way.
.panel-text {
visibility: hidden;
}
.panel-overlay:hover .panel-text {
visibility: visible;
}
So for some reason nothing was working when trying to use with .panel-overlay, so trying the image wrapper did the trick. Using visibility or display will not perform correctly still. Below CSS worked out, works exactly example provided (link) except icon, will work on that later.
panel-text { opacity: 0; }
panel-mainimage-wrapper:hover .panel-text {opacity: 1; }
Related
I am working on an E commerce application but the theme i am using add to cart button coming on hover effect but i want to make ( Add to cart button) always fixed .
the live working url is as following.
https://www.realfarmer.in/techy-new/shop.php
add to cart will come when cursor is on the product but i want it should come always
You need to remove the styles under
.product-wrap .product-img .product-action-2-wrap {
opacity: 0;
visibility: hidden;
bottom: -20px;
}
Which is hiding the add to cart button if not hovered. Or you can replace the same using
.product-wrap .product-img .product-action-2-wrap {
bottom: 0px;
opacity: 1;
visibility: visible;
}
So this is the code that's working when you hover over the product.
Add this code to your add custom code
.product-action-2-wrap{
visibility: visible;
opacity: 1;
bottom: 0px;
}
this will show add to cart button always visible in the products.
if it is work for you please give a like.
Just remove the background color on Hover using same color like that:
.product-wrap .product-img .product-action-2-wrap:hover .product-action-btn-2 {
background-color: #000;
}
I'm a bit confused about this but I think I've found the issue.
I have in my html:
<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
</div>
</div>
In my css I have:
.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}
So this basically means if I hover over the dropdownz class, the dropdownz-content display converts from none to block and the menu items show.
When I run this on an android touchscreen mobile device, I have to CLICK the dropdownz item in order for it to effect the hover and show the list, if I click it again, it effectively removes the hover.
This is desirable behaviour, it means I don't have to do any extra stuff for touch-screens. A "hover" becomes a click and the 2nd click removes the "hover". Great!
Apparently this doesn't work the same in SAFARI on an iPhone. I can't test it myself, I'm going via a friend who says it's not working, so I basically want to know:
Is this a known issue and what's the best way to remedy it? (Without JavaScript, surely!)
I'm thinking along the lines of :focus ?
try this :
.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 0.7;
--iron-overlay-backdrop-background-color: black;
}
</style>
This method set the overlay's opacity and all their childs. And if I want to set childs' opacity? I want 1 to (child) dialog's opacity
.dialog {
opacity: 1;
}
related question
I'm not sure I understand your question, but let me try this: If you wish to style the overlay for a particular dialog, you do so on the body of the page that holds the paper-dialog, as you can see in this pen. The CSS used is
body {
--iron-overlay-backdrop-opacity: 1.0;
--iron-overlay-backdrop-background-color: red;
}
While the paper-button and the paper-dialog are in another custom element, this approach works if both elements are instead in a plain HTML page. Look at how I'm handling a general error dialog in my app. If I put the CSS above on that page, it would work like the pen.
Let's say I have two sibling divs that shouldn't be showed at the same time. Inside both divs there are about 50 images.
Div 1 is showed by default with the class "active". But when the user clicks a certain button, it triggers an event that remove class "active" from Div 1 and append it to Div 2.
This toggle of divs works fine on a pc, but on some mobile devices, the response is TOO slow.
This is what I've tried so far:
First attempt:
div {
display: none;
&.active {
display: block;
}
img { display: block; /* always */ }
}
Second attempt:
div {
position: absolute;
left: 9999px; // in a viewport far far away
&.active {
position: relative;
left: 0;
}
img { display: block; /* always */ }
}
Regardless the device specifications, I'm sure there must be a way to get the better performance on ALL devices. Any ideas?
Thanks :)
I am currently installing a new website with a "max mega menu". The problem is, I can't get the submenu to show. I've tried with different z-index but I can't get it to work.
The second problem is, that the search menu is displaying on a new line. I want it on the same height as the main menu. How can i manage that?
This is the website: Link
Any help is appreciated...
by default submenus are set as display none and when mouse hover its set as display block but in your css you are set one more css as below as visibility hidden so just remove this
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item > ul.mega- sub-menu {
display: block;
opacity: 1;
visibility: hidden;// just remove this
}
hope this helps
You have in css:
visibility: hidden; set. Becouse of that elements of menu is invisible
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item > ul.mega-sub-menu
{
display: block;
visibility: hidden;
opacity: 1;
}
Just change it.
To solve search menu new line problem set float: left to #mega-menu-wrap-main_menu
#mega-menu-wrap-main_menu {
float: left;
}