``` Thanks ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 6, 2019, 4:43am UTC](https://forum.kirupa.com/t/how-to-do-a-border-onhover/640123/4 "2019-08-06T04:43:52Z")

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; } ``` ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 6, 2019, 2:02pm UTC](https://forum.kirupa.com/t/how-to-do-a-border-onhover/640123/5 "2019-08-06T14:02:09Z")

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 ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 6, 2019, 4:17pm UTC](https://forum.kirupa.com/t/how-to-do-a-border-onhover/640123/6 "2019-08-06T16:17:25Z")

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 ☹ ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 6, 2019, 7:28pm UTC](https://forum.kirupa.com/t/how-to-do-a-border-onhover/640123/7 "2019-08-06T19:28:38Z")

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

Hover over me! Contenteditable.

I will show on hover

``` ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 6, 2019, 7:49pm UTC](https://forum.kirupa.com/t/how-to-do-a-border-onhover/640123/8 "2019-08-06T19:49:17Z")

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 🙂