css Question posted in
Some basic documentation can be found here.

Css – How to add styling for focus shifting from one element to another element

I’m using spatialNavigation for focusing the element as below code

in index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/spatial_navigation.min.js"></script>
<script>
window.addEventListener('load', function () {
              // Initialize
              SpatialNavigation.init();
        
              // Define navigable elements (anchors and elements with "focusable" class).
              SpatialNavigation.add({
                selector: '.focusable',
                straightOnly: true,
                straightOverlapThreshold: 0.5,
                rememberSource: true,
              });
        
              // Make the *currently existing* navigable elements focusable.
              SpatialNavigation.makeFocusable();
        
              // Focus the first navigable element.
              SpatialNavigation.focus();
            });
</script>

inside component

<div>
  <button className="myFirstElement focusable">
    <div>
      <img src={'images/nocontent.png'} className="nocontentcard" />
      <img className="cardimage1" src={'images/landscape_card.png'} />           
    </div>
   </button>

  <button className="mySecondElement focusable">
    <div>
      <img src={'images/nocontent.png'} className="nocontentcard" />
      <img className="cardimage2" src={'images/landscape_card.png'} />
    </div>
   </button>
</div>

where ever I want to focus I’ll use focusable classname to add the focus styling

I need outline focus shifting smooth style like as a below video

expected style

Tags:

2

Answers


  1. 0

    To achieve smooth focus style transitions between elements using React and the Spatial Navigation library, apply CSS transitions to your focusable elements. Use the :focus pseudo-class to specify the focus style and add the transition property to animate this style change smoothly.

    .focusable {
  transition: outline 0.3s ease;
}

.focusable:focus {
  outline: 2px solid blue;
}
    Login or Signup to reply.
  2. 0

    This is done with another div that’s overlayed over the whole page, acting as the focus box. You need to write a js function that gets the coordinates of an element on the body given the row it’s on and its distance from the left side of the page. You can then tell the focus box object to slide around the page using the transform property with the transition-duration set to ~300ms. Then, write a function that saves the element currently being hovered over to a variable, and you can use that to add the focusable(focused?) class to that element, lookup its location data, and pass that into the first function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search