Hover effect is shown on the full row instead of a single box

The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Reroll #72 for 10.1.x

+++ b/core/themes/claro/js/image-anchor.es6.js
@@ -0,0 +1,18 @@
+  Drupal.behaviors.imageAnchor = {

+++ b/core/themes/claro/js/image-anchor.js
@@ -0,0 +1,19 @@
+ * DO NOT EDIT THIS FILE.

es6 files no longer needed for 10.x https://www.drupal.org/node/3305487 →

Removed image-anchor.es6.js file. Attached interdiff for same. Please review

Was tagged for issue summary update in #45 which still needs to happen from what I can tell.

Did not review.

patch is created for hovering on the anchor instead of on the particular box a hover effect plz review

Re #85 it was already established that a solution applied to the entire table would cause regressions in tables such as the one in admin/content. It can be annoying to read through all the comments in a long issue, but taking that time to read save you from wasting time on an approach that has already been rejected.

HINT: #66 mentions a way to address this that will not cause regressions and is something that I'd be willing to commit, so I'd encourage someone to take advantage of that answer key being hidden in plain sight.

Looking at this one at DrupalCon 2023

Updated summary with steps to reproduce

Added this in /workspace/DrupalPod/web/core/themes/claro/css/components/tables.pcss.css

.image-anchor tr :not(:hover) {
background-color: #000000;
}
.image-anchor tr :hover > div {
background-color: transparent;
}

It works! :D

This patch applies to Drupal 9.5.x

Applied the patch cleanly to core 11.x c8806a02991f04233f859d2ef8870363172a2186

@trackleft2 This is definitely not ready for RTBC. Applying cleanly is far from the only criteria taken into account when making this decision. A patch with unwanted changes can apply cleanly! In addition, every patch uploaded to a Drupal issue has a suite of automated tests run. All of these tests must pass for an issue to be committable.

In this case, it is getting a "custom commands failed" error. That means the patch is not even passing general code formatting tests. Clicking that message will take you to a page that lists the specific reasons those checks failed and point the contributor towards what must be changed to get it working.

New patch and interdiff

Cleaned up the tags some.

Did remove the submaintainer review tag as not sure that's needed. This is about fixing a hover effect and not how image style functions.

Following the issue summary steps I was able to confirm the issue on Drupal 11.x with a standard profile install.
Applying patch #97 when hovering over individual squares those squares are highlighted vs the whole row.
Saved the image style, edited by moving location and everything is working as expected.

Spotted some additional things that are likely easy to address.

1. +++ b/core/themes/claro/css/components/tables.css
   --- a/core/themes/claro/css/components/tables.pcss.css
   +++ b/core/themes/claro/css/components/tables.pcss.css
   

   Although the changes work when added here, it's better if they are added to image.admin.pcss.css as that's where the other .image-anchor styles are, including ones for .image-anchor <tr>, so it will keep related styles nearby and reduce repetition.

2. +++ b/core/themes/claro/css/components/tables.pcss.css
   @@ -141,6 +141,12 @@ tr.color-error:focus {
   +.image-anchor tr :hover>div {
   

   There should be a space on each side of the >. If this was the only thing I'd just fix it on commit - not worth un-RTBCing for just that.

OK, I've renamed image.admin.css to image.admin.pcss.css and per the recommendation.

Removed the styles from core/themes/claro/css/components/tables.pcss.css
Added the styles to modules/image/css/image.admin.pcss.css

OK, I've renamed image.admin.css to image.admin.pcss.css and per the recommendation.

Removed the styles from core/themes/claro/css/components/tables.pcss.css
Added the styles to modules/image/css/image.admin.pcss.css

There actually isn't a image.admin.pcss.css file in the images module.

But changes have been moved and point 2 in #100 appear to have been addressed. Remarking.

Thank you for the help @smustgrave and @trackleft2!!

Tried to address #100 on top of #97.

Still seems to be working.

The last submitted patch, 105: 3101460-105.patch, failed testing. View results →

Random failure

It's been tough, but after 3.5 years, 108 comments, and enough screenshots to feed a small nation, the combined efforts of 37 contributors have resulted in the image styles page getting this cool slice of CSS.

+.image-anchor td:not(:hover) {
+  background-color: var(--color-white);
+}
+
+.image-anchor td:hover > div {
+  background-color: transparent;
+}

And tbh I almost dug in to see if the CSS could get a little more optimized but you know what? This works, it's an infrequently visited area of a site, not likely to result in conflicts or scalability issues. Enjoy the nicer hover in that snazzy grid!

Automatically closed - issue fixed for 2 weeks with no activity.