How to do a ' border onhover ' ?

programming
1

Hello & Thanks ,
In code below I do a ’ div:hover + p.borderShowTop{ ’
to show a ‘comment’ onhover .
Now I want to do a ’ border onhover ’
to show a ‘comment’ .
Plz, can someone show me how to set that up ?
…

<!DOCTYPE html>
<html>
<head>
<style>
p.borderShowTop
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
p.borderShowRight
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
div {
   border-style: solid;
   border-color: green red blue pink;
   border-width: 12px 12px 1px 2px;
}
div:hover + p.borderShowTop{
  display: block;
}
</style>
</head>
<body>
<br><br>
<div contenteditable="true">Hover over me! Contenteditable.</div>
<p class="borderShowTop">I will show on hover</p>

</body>
</html>

…
Thanks for your help!

2

Where would you like the border to appear? Around the p element?

3

I would like the border to appear around:

<div class="item item4" contenteditable="true">

Thanks

4

Where in your HTML is that particular div element? Because the easiest way would be to do something like the following:

div.item:hover {
  border-width: 10px;
}
1 Like
5

I want to create an onhover for the ‘top border’ ,
and a separate hover for the ‘right border’ .
‘top border’ message should say "Click Top-border & hold down left-mouse to Drag ‘div’ .
‘right border’ message should say “Click on Right-border to change DIV size” .
So the important issue here to to be able to ‘click on a border’ (not on the 'div ') , to trigger a response . Something like topBorder:onhover .
I am having trouble with ‘how to code that’ .
Thanks

6

Ah! I get it now. Thanks for the clarification. There is no way to make a border clickable. One approach you can use is to have four div elements, one for each edge that mimics a border. I can’t think of another way of making that work :frowning:

7

That’s sad .
Code below could work , except that it kills the :hover effect . Any idea why?
Thanks

<!DOCTYPE html>
<html>
<head>
<style>

p.borderShowTop
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
p.borderShowRight
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
div {
   border-style: solid;
   border-color: green red blue pink;
   border-width: 12px 12px 1px 2px;
}
div:hover + p.borderShowTop{
  display: block;
}
</style>
</head>
<body>
<br><br>
<div contenteditable="true">
<img src="RedSquare.png" alt="" onclick="dragDiv()">
Hover over me! Contenteditable.
<img src="GreenSquare.png" alt="" onclick="changeWidthHeight()">
<p class="borderShowTop">I will show on hover</p>
</div>
<script>
function dragDiv() {
  alert("Start Dragging Dude!");
}
</script>
<script>
function changeWidthHeight() {
  alert("Width & Height has been changed!");
}
</script>
</body>
</html>
8

The selector you have for the hover specifies that the p element is immediately adjacent to your div element. In your code now, you have the p element as a child of the div. This means you can do this instead:

div:hover p.borderShowTop {
  display: block;
}

Also, you don’t need to use a separate script element for each function you are adding. You can combine all of your JavaScript code inside just a single script element :slight_smile: