Recently, I've received feedback regarding issues with "external files," although this is not relevant. To address this, I will update by stating that everything can actually be contained within a single document: Check out the live demo here (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 can achieve the desired effect without JavaScript. Here's an example using only CSS: View the live demo here (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;
}
In place of JavaScript, I opted for CSS :hover to create the hover effect. By wrapping the element in another container and adjusting padding, you can trigger the effect on the inner element when hovering over the outer container.
If you prefer using JavaScript, it's best to avoid inline js (where JavaScript functions are directly embedded within HTML). Below is a simple example utilizing JavaScript while maintaining style rules in CSS: Experience the live demo here (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 = '';
});
To understand why avoiding inline js is recommended, explore these search results for more information: https://www.google.com/search?q=Why+is+inline+js+bad%3F