alternating text color triggered by mouseover |
Post Reply | Page 12> |
Author | |
WattJet
Senior Member Joined: Jan 04 2016 Status: Offline Points: 256 |
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.
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
- Analysis of data repositories
If the mouse then goes over "Where is the data?" then the previous answer blends with background and the new answer appear
- Analysis of data repositories
- 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
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Posted: May 29 2021 at 2:19pm |
can be done ith javascript and/or css
Are you comfortable with any of them?
|
|
WattJet
Senior Member Joined: Jan 04 2016 Status: Offline Points: 256 |
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
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
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:
Edited by Hobby001 - May 29 2021 at 5:01pm |
|
WattJet
Senior Member Joined: Jan 04 2016 Status: Offline Points: 256 |
Posted: May 29 2021 at 3:59pm |
Wow! Thanks so much!
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
Posted: May 29 2021 at 5:45pm |
You may use something else like
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 |
|
WattJet
Senior Member Joined: Jan 04 2016 Status: Offline Points: 256 |
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 |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
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 |
|
WattJet
Senior Member Joined: Jan 04 2016 Status: Offline Points: 256 |
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
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6195 |
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. Here is the result: https://denislafrance.net/Dev1.htm |
|
Post Reply | Page 12> |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |