Jump to content

Plz , help me spot my error :


vmars316

Recommended Posts

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>
	
Link to comment
Share on other sites

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 by vmars316
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...