Jump to content

Plz , help me spot my error :


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...