Hi osgood_,
As seen in the image below, I am making a hover on "date" and "title".
"19Mar2016" and "Title: Inflation and the Euro" share the same destination.
So, I want to make the background color change on both, upon mouse-over on either "date" or "title".
How would I do?
Hosun Kang
1 Correct answer
Actually this gets more complex as you need the hover to work both ways so more unique data-class="mar19_2016_1" and classes are needed class="mar19_2016_2"
Unless there is a more streamlined way of doing this, which Im sure there must be, Im not sure its worth the extra effort. Its not very elegant but it works, maybe someone else can come up with a solution which is a bit less cumbersome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {
box-sizing: border-
...
14
Replies
I don't recommend this often because tables are such a chore to work with in responsive layouts but what you have here is perfect for a data table. And you can trigger table rows to change background color with pure CSS. No JS required.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Tables</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
width: 75%;
margin: 0 auto;
border: 4px solid #555;
color: #000;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
td {
padding: 3%;
border: 1px dotted #666
}
tr:nth-child(odd) { background-color: antiquewhite }
tr:nth-child(even) { background-color: aliceblue }
tr:hover { background-color: gold }
</style>
</head>
<body>
<table>
<caption>
Data Table
</caption>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
<td>Quora</td>
<td>Lorit</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
<td>Quora</td>
<td>Lorit</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
<td>Quora</td>
<td>Lorit</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
<td>Quora</td>
<td>Lorit</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
<td>Quora</td>
<td>Lorit</td>
</tr>
</tbody>
</table>
</body>
</html>
https://forums.adobe.com/people/Nancy+OShea wrote
I don't recommend this often because tables are such a chore to work with in responsive layouts but what you have here is perfect for a data table. And you can trigger table rows to change background color with pure CSS. No JS required.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Data Tables</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> table { width: 75%; margin: 0 auto; border: 4px solid #555; color: #000; font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif; font-size: calc(16px + 1vw); line-height: calc(1.1em + 0.5vw); } td { padding: 3%; border: 1px dotted #666 } tr:nth-child(odd) { background-color: antiquewhite } tr:nth-child(even) { background-color: aliceblue } tr:hover { background-color: gold } </style> </head> <body> <table> <caption> Data Table </caption> <tbody> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> <td>Quora</td> <td>Lorit</td> </tr> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> <td>Quora</td> <td>Lorit</td> </tr> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> <td>Quora</td> <td>Lorit</td> </tr> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> <td>Quora</td> <td>Lorit</td> </tr> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> <td>Quora</td> <td>Lorit</td> </tr> </tbody> </table> </body> </html>
That would be the obvious choice but the layout shown requires a space between one column and the other column so somehow you need to connect the indivdual table cells up so both have the colored background if one or the other cell is hovered over, not the complete <tr></tr> table row.
Also we dont know if the information is adjacent to each other, it might be anywhere in the list, hardly likely, but a possibility.
Do I think this is worth the effort, only if its simplified by the use of a table with co-joined cells and the OP is happy for the whole row to be highlighted on hover.
A solution to address seperate containers anywhere on the page is there but is currently pretty cumbersome. I dont have time to see if I can streamline it.
Os.
You could do this using the css psuedo class 'target', along with css animations. But I think that would be way beyond the OPs current skill level, and if you want an example from me you will have to wait until tomorrow, as I'm off for my evening drink 
.
pziecina wrote
What is did show to me, is that css is 'getting there', but like everything else that is not css2.1/2, it is the slow adoption by browsers that holds everthing back.
I remember asking for a css vendor prefixing tool in Dw back in 2010, with many pointing out that it was not required, as browsers would stop using them. It's now 2019 and they are still being used.
There is a huge gap between what is planned for the future and can be tested behind a flag than when it can actually be used safely in production.
AdChoices