Plz , help me spot my error :

vmars316 · August 4, 2019

Hello & Thanks ;

Please , What's the diff between these two codes ,
other than the fact that 'my attempt' doesn't work :

================
from w3Schools:

	<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: yellow;
  padding: 20px;
  display: none;
}
  
span:hover + div {
  display: block;
}
</style>
</head>
<body>
	<span>Hover over me!</span>
<div>I will show on hover</div>
	</body>
</html>

my attempt :

 
	<!DOCTYPE html>
<html>
<head>
<style>
p.borderShow1 {
  background-color: yellow;
  padding: 20px;
  display: none;
}
  
div :hover + p.borderShow1{
  display: block;
}
</style>
</head>
<body>
	<div>Hover over me!</div>
<p class="borderShow1">I will show on hover</p>
	</body>
</html>

dsonesuk · August 4, 2019

Any space represents a ref to child elements within it. Your div doesn't have any child elements only siblings i.e the paragraph.

vmars316 · August 5, 2019

Thanks dsonesuk

works perfectly !

Now what I want to do is add a few more things to be more in line with I am aiming at . But I am running into a similar thing .

The two areas that I suspect are problematic are :

	div .item4:hover +  p.borderShowTop {
	  background-color: yellow;
      padding: 20px;
      display: block;
}
 
<!--  and  -->

<div class="item item4" contenteditable="true">  
Hover over me! Contenteditable.
<p class="borderShowTop">Click & hold down to move  :)</p>

I can't see my error .

Edited August 5, 2019 by vmars316

vmars316 · August 5, 2019

Editor wouldn't let me add my code:

So here it is now:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Drag Multiple Elements</title>
<style>
    body {
      margin: 20px;
    }
    #container {
      width: 100%;
      height: 200px;
      background-color: #DAE9BC;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }
    .item:active {
      opacity: .75;
    }
    .item:hover {
      cursor: pointer;
    }
    .item {
      border-style: solid;
      border-width: 1px;
      touch-action: none;
      user-select: none;
      position: absolute;
    }
    .item4 {
      width: 100px;
      height: 100px;
      background-color: #F3F8EA;
	  border-color: #006400;
      top: 100px;
      left: 35px;
}
	p.borderShowTop{
	  background-color: yellow;
      padding: 20px;
      display: none;
}
	div .item4:hover +  p.borderShowTop {
	  background-color: yellow;
      padding: 20px;
      display: block;
}
</style>
</head>
<body style="text-align: center;">
<h5>Drag Multiple Elements</h5>
<div id="outerContainer">
<div id="container">
<div class="item item4" contenteditable="true">  
Hover over me! Contenteditable.
<p class="borderShowTop">Click & hold down to move  :)</p>
</div>  <!-- class="item item4"  -->
</div>  <!-- id="container" -->
</div>  <!-- id="outerContainer" --> 
</body>
</html>

Thanks

Sign In

Plz , help me spot my error :

Recommended Posts

vmars316

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity