Why is my outline top not showing in CSS?

Milkdromeda 0
Viewed 24

Im styling multiple boxes, it's only the first box whose top outline is not working. Here's my code. I'm using bootstrap in React. Border works. I have attached the relevent css.

EDIT: I hacked it by setting my outline-offset to negative the amount of pixels. so -3. Worked fine for me, and am wondering how it happened and how to avoid it.

.savedMeme--card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100%;
  padding: 10px;
}

.savedMeme--card:hover {
  background-color: #e3e3e3c4;
  outline: 3px solid var(--blue);
}
<div className="offcanvas offcanvas-end" tabIndex="-1" id="sidebar" aria-labelledby="sidebar--header">
              <div className="offcanvas-header">
                <h2 className="offcanvas-title" id="sidebar--header">Your saved memes</h2>
                <button className="btn-close" data-bs-dismiss="offcanvas" type="button" aria-label="Close"></button>
              </div>
              <div className="offcanvas-body p-0">
               <div className="savedMeme--card">
               <!-- this is an imported component -->
            <div className="savedMeme--header">
                <span className="bi bi-bookmark-x-fill"></span>
                <img src={props.url} style={{ width: "80px", height: "80px" }} alt="meme" />
            </div>
            <div className="savedMeme-body">
                <p>
                    {props.topText}...
                </p>
                <p className="savedMeme--view-meme">view meme</p>
            </div>
        </div>
              </div>
            </div>
          </div>
        </div>

react-bootstrap css html
1 Answers

I have fixed your closing div tag issue and changed className to class and just defined css variable

:root {
  --blue: blue;
}

Everything seems to works fine on hover.

:root {
  --blue: blue;
}

.savedMeme--card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100%;
  padding: 10px;
}

.savedMeme--card:hover {
  background-color: #e3e3e3c4;
  outline: 3px solid var(--blue);
}
<div class="offcanvas offcanvas-end" tabIndex="-1" id="sidebar" aria-labelledby="sidebar--header">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title" id="sidebar--header">Your saved memes</h2>
    <button class="btn-close" data-bs-dismiss="offcanvas" type="button" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body p-0">
    <div class="savedMeme--card">
      <!-- this is an imported component -->
      <div class="savedMeme--header">
        <span class="bi bi-bookmark-x-fill"></span>
        <img src={props.url} style={{ width: "80px" , height: "80px" }} alt="meme" />
      </div>
      <div class="savedMeme-body">
        <p>
          {props.topText}...
        </p>
        <p class="savedMeme--view-meme">view meme</p>
      </div>
    </div>
  </div>
</div>

Vijay Hardaha0
Related