Return to Answer

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/
 
#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}
    
.def {
  display: none;
}
    
#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.

I wanted to display definitions in a box on the right side of the browser as my users read through my site and ':hover' over highlighted terms; therefore, I did not want the 'definition' element to be displayed inside the 'text' element.

While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.

<div id="explainBox"class="explainBox">                             /*Common parent*/

    <a class="defP"id="light" href="http://en.wikipedia.or/wiki/Light">
        Light                                            /*highlighted term in text*/
    </a>
    
    
    is as ubiquitous as it is mysterious.                              /*plain text*/
    
 <div id="definitions">                /*Container for :hover-displayed definitions*/
    
    <p class="def" id="light">                           /*example definition entry*/
        Light: </br>Short Answer: The type of energy you see
    </div>

    
</div>

/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light{
    display:inline-block;
}
.def{
    display:none;
}
#definitions{
background-color:black;
position:fixed;  /*position attribute*/
top:5em;         /*position attribute*/
right:2em;       /*position attribute*/
width:20em;
height:30em;
border: 1px solid orange;
border-radius:12px;
padding:10px;
}

In this example the target of a ':hover' command from an element within #explainBox must either be #explainBox or also within #explainBox. The position attributes assigned to #definitions force it to appear in the desired location (outside #explainBox) even though it is technically located in an unwanted position within the HTML document.

I understand it is considered bad form to use the same #id for more than one HTML element; however, in this case the instances of #light can be described independently due to their respective positions in uniquely #id'd elements. Is there any reason not to repeat the id '#light' in this case?

If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.

I wanted to display definitions in a box on the right side of the browser as my users read through my site and :hover over highlighted terms; therefore, I did not want the 'definition' element to be displayed inside the 'text' element.

While the actual HTML elements in the file must be either nested or contained in a single element to be valid :hover targets to each other, the css position attribute can be used to display any element where ever you want. I used position:fixed to place the target of my :hover action where I wanted it on the user's screen regardless to its location in the HTML document.

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
} 

.def {
  display: none;
} 

#definitions {
  background-color: black;
  position: fixed; 
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

In this example the target of a :hover command from an element within #explainBox must either be #explainBox or also within #explainBox. The position attributes assigned to #definitions force it to appear in the desired location (outside #explainBox) even though it is technically located in an unwanted position within the HTML document.

I understand it is considered bad form to use the same #id for more than one HTML element; however, in this case the instances of #light can be described independently due to their respective positions in uniquely #id'd elements. Is there any reason not to repeat the id #light in this case?

/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions."*/
#explainBox #light:hover~#definitions>#light{
    display:inline-block;
}
.def{
    display:none;
}
#definitions{
background-color:black;
position:fixed;  /*position attribute*/
top:5em;         /*position attribute*/
right:2em;       /*position attribute*/
width:20em;
height:30em;
border: 1px solid orange;
border-radius:12px;
padding:10px;
}

/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/ 

#explainBox #light:hover~#definitions>#light{
    display:inline-block;
}
.def{
    display:none;
}
#definitions{
background-color:black;
position:fixed;  /*position attribute*/
top:5em;         /*position attribute*/
right:2em;       /*position attribute*/
width:20em;
height:30em;
border: 1px solid orange;
border-radius:12px;
padding:10px;
}