BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Websites Created with OpenElement
  New Posts New Posts RSS Feed - alternating text color triggered by mouseover
  FAQ FAQ  Forum Search   Register Register  Login Login

Topic Closedalternating text color triggered by mouseover

 Post Reply Post Reply Page  12>
Author
Message
WattJet View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jan 04 2016
Status: Offline
Points: 256
Direct Link To This Post Topic: alternating text color triggered by mouseover
    Posted: May 29 2021 at 1:51pm
 
Hi,

I created this website with OE https://datamilling.com/
It is based on the senslight template but I did change structure and limited some functionalities, and avoid using others

I have a question on how to create a feaure:
in the section https://datamilling.com/Services.htm currently there three text boxes with bullet point questions.
  • Do we have data? Is data available?
  • Where is the data?
I would like to give answers to those questions through a mouseover or mouseclick, in such way that with a mouseover and/or click, the corresponding  answer to each question  appears.

i.e. If the mouse goes over the "Do we have data?...," then the response text for that question only appears
  • Do we have data? Is data available?
 - Analysis of data repositories   
  • Where is the data?

If the mouse then goes over "Where is the data?" then the previous answer blends with background and the new answer appear
  • Do we have data? Is data available?
 - Analysis of data repositories   
  • Where is the data?
- Data Management Architecture  
-----------

I do not think that buttons are functional here. Alternartively, I tried to use the customization, but it only allows me to select the entire field/box, and not part of it (again, for me the important thing is that only the specific answer to the question appears.... otherwise user will perceive it as a long text and will go elsewhere

Any suggestions will be welcome
Wattjet
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: May 29 2021 at 2:19pm
can be done ith javascript and/or css 

Are you comfortable with any of them?
Back to Top
WattJet View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jan 04 2016
Status: Offline
Points: 256
Direct Link To This Post Posted: May 29 2021 at 2:27pm
not really..... I was hoping there was element/feature something within OE to achieve this result.

I will look on the internet to see if there is a similar CSS available (after all it is a common feature in many sites)

Regards
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: May 29 2021 at 3:31pm
add a group of element to a blank page and give it question as custom class

add a text blok with your question in it and another one with your answer

give the answer text block answer for custom class

create a css code block in header position

add the following code:

.question .answer{
opacity:0;
transition: 1s;
}
.question:hover .answer{
opacity:1;
}




Edited by Hobby001 - May 29 2021 at 5:01pm
Back to Top
WattJet View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jan 04 2016
Status: Offline
Points: 256
Direct Link To This Post Posted: May 29 2021 at 3:59pm
Wow!  Thanks so much!
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: May 29 2021 at 5:45pm
You may use something else like

.question .answer{
opacity:0.05;
transition: 1s;
}
.question:hover .answer{
opacity:1;
width:auto
}


This will tell visitors that they might have to hover or click to see wht's behind. see tghe example on my site.




Edited by Hobby001 - May 29 2021 at 5:49pm
Back to Top
WattJet View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jan 04 2016
Status: Offline
Points: 256
Direct Link To This Post Posted: May 29 2021 at 8:19pm
It looks great indeed. Thanks again for all your help!

It took me some time, but I have made it work (see https://datamilling.com/TestQandA.htm)
Now the question is how to I make it work in the desired location  (https://datamilling.com/Services.htm , see the same Q&A in the light blue field)

As in your example, I assume that I will need to do one frame for each question. Since each of the text boxes containing the set of questions is part of a group element of the original Senselight template (PAN_INFO_01; PAN_INFO_02; PAN_INFO_03), to keep the same configuration, I will have to
a) Create a group element in each of the pannels, that I will fill with the corresponding background color
b) Within each of those group elements, I will create a number the group elements, one for each Q&A

Is this right? or is it there another way to group the Q&A so that they show as they do now?


Edited by WattJet - May 29 2021 at 8:20pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: May 29 2021 at 9:24pm
Since there is no identifyable difference between two lines in a multi-line text element, there is no easy way to do it with pure CSS.

You will have to redo your text as shown.




Edited by Hobby001 - May 29 2021 at 9:25pm
Back to Top
WattJet View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jan 04 2016
Status: Offline
Points: 256
Direct Link To This Post Posted: May 29 2021 at 9:41pm
Yes, I understand that point.
The question is if I can group a set of questions and answers (each of these with a specific frame, and two text eelements each as you showed), so that they show all part of a "box" that will act as a frame (each of the three colored boxes I show in the page https://datamilling.com/Services.htm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: May 29 2021 at 11:16pm
I added a group of elements and included all the other in it.

I surrounded all the components with a border to make it more visible.


Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.113 seconds.