I'm confused on how to make this style onmouseover

JavaScript
1

I’m confused on how to make this style onmouseover.

<div style="display:block;width: 16.6666666667px; height: 50px; cursor: pointer; background-color:blue;  border-left: 16.6666666667px solid red;border-right: 16.6666666667px solid green; "></div>

I know of these properties, but I’m not doing something correctly.

this.style.borderrightColor='
this.style.borderleftColor='
this.style.borderrightwidth='
this.style.borderleftwidth='
this.style.borderstyle='
this.style.borderright='
this.style.borderleft='

I tried doing it like this but I’m doing something wrong.

<a href="" style="display:block; margin: 0px 0px 0 0px;width: 50px; height: 50px; background-color:#00a0b0; color:transparent;" 
onmouseover="this.style.backgroundColor='blue';
this.style.borderrightColor='green'
this.style.borderrightwidth='16px'
this.style.borderstyle='solid'
this.style.borderleftColor='red'
this.style.borderrightwidth='16px'" 
onmouseout="this.style.backgroundColor='#00a0b0'"></a>
2

I do not speak JavaScript, but it looks like there is an unnecessary semicolon after the word ‘blue’,
onmouseover="this.style.backgroundColor='blue';
(Disclaimer: I do not know if the JS is valid or not. Just guessing about a possible “inconsistency”.)

5

I did it.

<div style="display:inline-block; cursor: pointer; width: 50px; height: 50px;background-color:#00a0b0; "
onmouseover="this.style.backgroundColor='blue';
this.style.width='18px';this.style.height='50px'
this.style.borderLeft='thick solid red';
this.style.borderLeftWidth='16px';
this.style.borderRight='thick solid green'
this.style.borderRightWidth='16px'"
onmouseout="this.style.backgroundColor='#00a0b0';
this.style.width='50px';this.style.height='50px';
this.style.border='none'">
</div>
6

Topic [SOLVED]

7

Good for you, asasass. Would you mind posting your solution?

8

It’s right here:

1 Like
9

Hi, asasass.

For my own benefit and learning, I dabbled with your JavaScript.

Because some of the JS styles were terminated with semicolons and others were not, I decided to see what would happen if I removed the semicolons from all of them. They all still worked. Apparently, all that is needed is a space between them.

I then moved the inline CSS styles of the top div to the top of the page, again for my benefit, to remove the clutter from the HTML and make them easer to read.

Finally, I removed the JS code for styles already defined in the CSS.

(You can return the CSS in the head section of the page to inline styles within the div very easily, if that floats your boat :). The JS will not need to change)

Thank you for helping me learn something about JS.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vertical-color-bars(JS)</title>
<!--
https://www.sitepoint.com/community/t/im-confused-on-how-to-make-this-style-onmouseover/228992/8
asasass
Jul 2,2016 2:03 AM
https://jsfiddle.net/0yats3r3/17/
-->
    <style>
div {
    width:50px;
    height:50px;
    background-color:#00a0b0;
    cursor:pointer;
}
    </style>
</head>
<body>

<div
onmouseover="
this.style.width='18px'
this.style.backgroundColor='blue'
this.style.borderLeft='16px solid red'
this.style.borderRight='16px solid green'"
onmouseout="
this.style.width='50px'
this.style.backgroundColor='#00a0b0'
this.style.border='none'">
</div>

<div style="width:18px;height:50px;background-color:blue;border-left:16px solid red;border-right:16px solid green;cursor:pointer;"></div>

</body>
</html>

In the next chapter, you’ll have to show me how to write a “listener” so the JS can be removed from inline, too. :slight_smile:

1 Like
10

Why wait for the next chapter? We can dramatically improve things now without needing to invoke a listener, by moving the terrible inline CSS style out to their own CSS declarations.

The onmouseover styles can be placed in their own declaration, and the onmouseout isn’t needed for they just return the styles back to what is currently the default in the div declaration.

As such, we just need a :hover declaration, and to remove those god-awful onmouseover and onmouseout attributes:

div:hover {
  width: 18px;
  background-color: blue;
  border-left: 16px solid red;
  border-right: 16px solid green;
}

Which leaves the HTML with the onmouseover and onmouseout taken out, looking quite empty now:

<div></div>

We can target it more effectively, by giving it and the CSS declaration a class name:

<div class="bars"></div>

div.bars:hover {
    ...
}

We can also get rid of the embedded styles from the second div, by giving it a class of “hover” and adding the .hover part to the CSS declaration, which leaves us with HTML of:

<div class="bars"></div>

<div class="hover"></div>

and CSS consisting of:

div {
    width:50px;
    height:50px;
    background-color:#00a0b0;
    cursor:pointer;
}
div.bars:hover, .hover {
  width: 18px;
  background-color: blue;
  border-left: 16px solid red;
  border-right: 16px solid green;
}

That’s a much better working solution, and can be found at https://jsfiddle.net/egcgau7x/

Oh and look, not a single line of JavaScript code. I like that the best.

4 Likes
11

Hi, @Paul_Wilkins,

asasass is a special needs member with … special needs. He needs wants all of the scripts and styles to be written inline within the HTML elements. I was playfully goading him to think outside of the [inline] box. No one would use inline JS for hover behaviors except outdated Dreamweaver users AFAIK.

The serious side to my post is that I actually did learn a trace more about JS by playing with his code.

Cheers.

3 Likes
12

Needs? So there is a genuine reason for it? If so, perhaps you could enlighten me, because I’ve missed it along the way. I thought it was just “wants”.

(I’ve already advised against going the JavaScript route for this, so it’s good to see a JS Guru like @Paul_Wilkins agrees with me. )

1 Like
13

Edited my post.

1 Like
14

[quote=“ronpat, post:11, topic:228992, full:true”]
Hi, @Paul_Wilkins,

asasass is a special needs member with … special needs. He needs wants all of the scripts and styles to be written inline within the HTML elements.[/quote]

Thanks for the update :stuck_out_tongue: but somehow I think that I’ll want to gain confirmation and possibly even clarification from our special needs patient.

1 Like
15

It is just wants - - can’t be bothered to learn HTML properly so why learn how to write the CSS and JavaScript (when applicable) properly in separate files either.

We have already determined that in every situation where needs was stated that external CSS is available.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.