Skip to main content
R
Rajesh_Kumar1-Visitor
1-Visitor
August 10, 2019
Solved

CSS for Panel Visibility

  • August 10, 2019
  • 2 replies
  • 1988 views

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.  

Best answer by Sugumar_5656

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.

2 replies

S
Sugumar_56561-VisitorAnswer
1-Visitor
August 14, 2019

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.

    R
    Rajesh_Kumar1-VisitorAuthor
    1-Visitor
    August 21, 2019

    Thanks @Sugumar_5656 . The code is working great!

    A
    abarki5-Regular Member
    5-Regular Member
    August 16, 2019

    Hello Rajesh_Kumar,

     

    If @Sugumar_5656 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

    Terms & ConditionsCookie settingsAccessibility statement