Creating a clickable area in HTML/CSS/JavaScript

Question

So I have this code that I created with some help:

I don't understand how to enter code it kept creating everything on one line at the formatting looked unreadable so here is a link:

http://jsfiddle.net/QFF4x/

<div style="border:1px solid black;" onmouseover="change(this)" onmouseout="restore(this)" ></div>

Either way, when the mouse is over the black line it expands downwards. How can i make the onomouseover area larger?

For example if the mouse is hovering up to 15 pixels underneath the line the line would expand. how can i have it do that?

*Note: I everything has to be in the HTML, inline coding only I cannot link any JS or CSS pages.

Answer 1

For some reason, I'm getting complaints about "external files" which isn't relevant, so I'm updating to clarify that all of this can be in one document: Live demo (click).

<style>
#outer {
  padding-bottom: 15px;
}

#inner {
  border: 1px solid black;
}

#inner.big {
  border-width: 3px;
}
</style>

<div id="outer">
  <div id="inner"></div>
</div>

<script>

var outer = document.getElementById('outer');

var inner = document.getElementById('inner');

outer.addEventListener('mouseenter', function() {
  inner.className = 'big';
});

outer.addEventListener('mouseleave', function() {
  inner.className = '';
});

</script>

You don't need JavaScript for this at all. Here's just a css example: Live demo (click).

  <div class="outer">
    <div class="inner"></div>
  </div>

CSS:

.outer {
  padding-bottom: 15px;
}

.inner {
  border: 1px solid black;
}

.outer:hover > .inner {
  border-width: 3px;
}

Rather than using JavaScript, I'm using CSS :hover . The trick here is to wrap the element in another element and pad the outer element so that you can hover over that padding to affect the inner element.

If you do want to use JavaScript, please ignore any answers here using inline js (that's where you refer to javascript functions within the html.). Here's a basic example of how to do that without inline js and keeping your styles in css: Live demo (click).

  <div id="outer">
    <div id="inner"></div>
  </div>

CSS:

#outer {
  padding-bottom: 15px;
}

#inner {
  border: 1px solid black;
}

#inner.big {
  border-width: 3px;
}

JavaScript:

var outer = document.getElementById('outer');

var inner = document.getElementById('inner');

outer.addEventListener('mouseenter', function() {
  inner.className = 'big';
});

outer.addEventListener('mouseleave', function() {
  inner.className = '';
});

Why do this instead of inline js? Read these results - there are plenty! https://www.google.com/search?q=Why+is+inline+js+bad%3F

Answer 2

To increase the border on hover change

element.style.border = "3px solid black";

To for 15px

element.style.border = "15px solid black";

Answer 3

You can put the div in a larger div, and set the onclick event on the larger div.

<div onmouseover="change(this.childNodes[0])" onmouseout="restore(this.childNodes[0])">
    <div style="border:1px solid black;" ></div>
</div>

Answer 4

this is the solution.

<div style="border:1px solid black;" onmouseover="javascript:this.style.border = '8px solid black';" onmouseout="javascript:this.style.border = '1px solid black';" ></div>

http://jsfiddle.net/5GAUq/

Answer 5

heres a solution using a wrapping div with padding:-15px and on its hover events, just use the firstElemntChild

<script>
    function change (element) {
        element.firstElementChild.style.border = "3px solid black";
    }
    function restore(element) {
        element.firstElementChild.style.border = "1px solid black";
    }
</script>

<div style="padding-bottom:15px;" onmouseout="restore(this)" onmouseover="change(this)" >

    <div style="border:1px solid black;"  >

    </div>

</div>

so you can hover 15 px under the border and the border changes and restores

fiddle . http://jsfiddle.net/QFF4x/2/