I am working on a website, and I ran into a bug with my css. I am wanting a div to show when another div is focused. Why is it not working? Here is my code:

.explore-card-hidden-info {
    display: none;
}

.explore-card-light:focus .explore-card-hidden-info, .explore-card-hidden-info:hover {
    display: block;
}

<div>
    <div className="explore-card-light web-box-hor" style={props.style}>
        <div>
        <img src={props.src} alt="imgex" style={{width: "100%", margin: 'auto', height: 'auto'}}></img>
        </div>
        <div style={{marginLeft: '20px'}}>
            <p className="card-title" style={{textAlign: 'left'}}>{props.title}</p>
            <p className="card-main-text">{props.main}</p>
            <p className="card-footer-text">{props.ex}</p>
        </div>
        <div style={{marginLeft: '20px'}}>
            <p className="explore-card-footer-text" style={{margin: 'none'}}>rates: {props.rate}</p>
            <p className="explore-card-footer-text" style={{margin: 'none'}}>views: {props.views}</p>
            <p className="explore-card-footer-text" style={{margin: 'none'}}>purchases: {props.buys}</p>
        </div>
        <div style={{ padding: '30px 150px' }}>
            <p className="card-title">{props.money}</p>
            <OpBtnOutlineRound text="Buy"></OpBtnOutlineRound>
        </div>
    </div>
    <div className="explore-card-hidden-info">
        <h2>
            I adm hidden!
        </h2>
    </div>
</div>

.explore-card-light {
    background-color: var(--card-bg-light);
    border-radius: 0px 7px 7px 0px;
    padding: 25px;
    width: 95%;
    margin: 20px;
    border-left: 10px solid var(--second);
    position: relative;
    right: 0px;
    transition: all 0.4s ease;
    align-items: center;
    justify-content: space-between;
}
.explore-card-hidden-info {
    display: none;
}

I got it to work with focus on another thing on the website, but it is not wanting to work on this one!

CodePudding user response：

.explore-card-hidden-info is not a descendant of .explore-card-light, it's an adjacent element. Use to represent that in CSS.

To make a DIV focusable from the mouse, you need to give it a tabindex.

.explore-card-hidden-info {
    display: none;
}

.explore-card-light:focus   .explore-card-hidden-info {
    display: block;
}

<div>
  <div class="explore-card-light web-box-hor" style={props.style} tabindex="1">
    <div>
      <img src={props.src} alt="imgex" style={{width: "100%", margin: 'auto', height: 'auto'}}></img>
    </div>
    <div style={{marginLeft: '20px'}}>
      <p class="card-title" style={{textAlign: 'left'}}>{props.title}</p>
      <p class="card-main-text">{props.main}</p>
      <p class="card-footer-text">{props.ex}</p>
    </div>
    <div style={{marginLeft: '20px'}}>
      <p class="explore-card-footer-text" style={{margin: 'none'}}>rates: {props.rate}</p>
      <p class="explore-card-footer-text" style={{margin: 'none'}}>views: {props.views}</p>
      <p class="explore-card-footer-text" style={{margin: 'none'}}>purchases: {props.buys}</p>
    </div>
    <div style={{ padding: '30px 150px' }}>
      <p class="card-title">{props.money}</p>
      <OpBtnOutlineRound text="Buy"></OpBtnOutlineRound>
    </div>
  </div>
  <div class="explore-card-hidden-info">
    <h2>
      I adm hidden!
    </h2>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.explore-card-light:focus~.explore-card-hidden-info, .explore-card-hidden-info:hover {
    display: block;
}

by adding the general sibling selector ~ this should work so change

.explore-card-light:focus.explore-card-hidden-info, .explore-card-hidden-info:hover {
    display: block;
}

TO

.explore-card-light:focus~.explore-card-hidden-info, .explore-card-hidden-info:hover {
    display: block;
}