cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

CSS for Panel Visibility

SOLVED
Regular Member

CSS for Panel Visibility

Hi all,

I have created a static mashup and where I have an image and two value display widgets. On that mashup, I have placed a panel widget so my image and value widgets went behind the panel. No on the panel I've placed another two value display widgets. See the attachment for better understanding and all the widgets (one image and four value display widgets) are getting data from an infotable. 

 

Now I want to hide the panel (which means panel and the widgets on the panel) by default and show the widgets behind the panel but when mouser over it, I want to show the panel and its widget.

 

To do this, need css code. So pls share some codes to complete this.  

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: CSS for Panel Visibility

Hi Rajesh,

Use the below code to achieve it.

 

.test .widget-panel
{
opacity: 0;
}
.test .widget-panel:Hover
{
opacity: 1;
}

 

Don't forget to mention the custom class as "test" into the attribute field of the panel.

3 REPLIES 3
Highlighted

Re: CSS for Panel Visibility

Hi Rajesh,

Use the below code to achieve it.

 

.test .widget-panel
{
opacity: 0;
}
.test .widget-panel:Hover
{
opacity: 1;
}

 

Don't forget to mention the custom class as "test" into the attribute field of the panel.

Re: CSS for Panel Visibility

Hello Rajesh_Kumar,

 

If @Sugumar response has answered your question, please mark it as an Accepted Solution for the benefit of others who may have the same question in the future.

Thank you for your contributions to the PTC Community.

Abarki

Re: CSS for Panel Visibility

Thanks @Sugumar . The code is working great!