I'm breaking down the HTML and css code: Cursor hovering over / changing color

This page will focus on the hovering effect over each box.

There's a feature which enhances the hovering effect.
When you drag your cursor over each box;the color changes.

Let's start by showing a standard sequence.
It's using the basic features found on IQGO.

You'll notice that each time your MOUSE CURSOR is placed over any box,
The color changes a-little.

The purpose is to make navigation easier.
and, you have a better time moving throughout the Text Fields.

This is done by adding a CSS Code within each box, 
just before the content.

SO, it would read as follows:

all content here.
Listing of websites.
  (A thru D)

</div>
<div class="cursermakeswhite">

all content here.
Listing of websites.
  (D thru M)

</div>
<div class="cursermakeswhite">

all content here.
Listing of websites.
  (M thru S)

</div>
<div class="cursermakeswhite">

all content here.
Listing of websites.
  (D thru M)

</div>
Then, in the CSS field; the Code is added:
<style type="text/css">
.cursermakeswhite:hover {background-color: rgba(255,253,252,0.9); border-radius:6px;  }

</style>

So, when using the RGBA code (255,253,252,0.9); I'm making the HOVER color into a mild Off-White.

Example 1
When hovering over the text-fields, we'll create a strong White color.
and the initial text-fields vary slightly.

all content in Row#1 here.

all content in Row#2 here.

all content in Row#3 here.

all content in Row#4 here.

Example 2
We'll emphasize the Hover feature by changing to RED.
This will show-off this features capabilities.

Example 3
For demonstrative purposes only;
we'll make each box a different color when highlighted.

Example 4
Now, this is where things get complicated.
and inherited flaws begin to show.

text here
text here
text here
text here
text here
text here
text here
text here
text here
text here

Example 5
This presents a major setback.
But there are several ways to rectify the problem.

The first option is by simply using 0px padding.
However, the text pushes to the very top of the box.
This gives no space between these areas.
(of course, the bottom text is also pushed against edge, as well).

(B)
the 2nd method is by placing an invisible block at the beginning & end of the text code.
In Box#2, I've made these blocks Yellow in order to demonstrate their purpose.
Notice the nice space it creates on top.
While also creating a nice gap near the bottom. 
(the Top padding space is 4px, while I'm making a slightly larger 6px space at bottom.

BOX #4 shows the finished product. 
(Obviously, in Box#2 and #4, this does not help the left and right sides).
 
(C)
THE 3RD METHOD IS THE MOST PROGRESSIVE ATTEMPT AT PERFECTING THESE ISSUES.
But it requires an entire variable placed within the HTML.

Essentially, in box#3; 
we're adding an entire variable code sequence within the HTML.
The added code looks like this:
onmouseout="this.style.backgroundColor='rgba(230,249,246, 1.0)'" onmouseover="this.style.backgroundColor='rgba(255,253,251, 0.9)'"

(D)
The original code for inner-box #3 looks like this:
<div style="background-color: rgba(230 , 249 , 246 , 1.0); border-left-color: rgba(10 , 10 , 10 , 0.9); border-left-width: 1.1px; border-radius: 6px; border-right-color: rgba(10 , 10 , 10 , 0.9); border-right-width: 1.1px; border: solid rgba(5 , 3 , 3 , 1.0) 1.0px; box-shadow: inset 0px 0px 4px 3px rgba(109 , 115 , 117 , 0.97); color: #423d4c; font-size: 15px; margin-left: 0.3px; margin-right: 0.3px; padding: 10px; text-align: justify;">
<center>
                  
 <div class="cursermakeswhite">

text here<br>
text here<br>
 ETC. ETC. ETC.   and, so on, and, so on.

(E)
THE UPDATED CODE
<div onmouseout="this.style.backgroundColor='rgba(230,249,246, 1.0)'" onmouseover="this.style.backgroundColor='rgba(255,253,251, 0.9)'" style="background-color: rgba(230 , 249 , 246 , 1.0); border-left-color: rgba(10 , 10 , 10 , 0.9); border-left-width: 1.1px; border-radius: 6px; border-right-color: rgba(10 , 10 , 10 , 0.9); border-right-width: 1.1px; border: solid rgba(5 , 3 , 3 , 1.0) 1.0px; box-shadow: inset 0px 0px 4px 3px rgba(109 , 115 , 117 , 0.97); color: #423d4c; font-size: 15px; margin-left: 0.3px; margin-right: 0.3px; padding: 10px; text-align: justify;">
<center>
                  
 <div class="cursermakeswhite">

text here<br>
text here<br> 
...ETC. ETC. ETC.   and, so on, and, so on.

(F)
Row#3 has a huge 25px padding.  (while Rows #1,#2,and #4 have 0px padding).
But the NEW variable prevents the Hover color from distorting.

For demonstrative purposes, we've made the White Cursor colors differ slightly.
If you look closely at Box#3,
 you'll see a small difference between the Padding area and text area.
Normally, we would make these hover colors identical.

text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here

For demonstrative purposes-
the outer HOVER padding here
is a slightly different color.
This shows how much space
the padding can take.
text here
text here
text here
text here
text here
text here

text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here

Example 6
This section will focus primarily on Variables.
The purpose is to make the "MAKES-WHITE" tag identical to the onmouseover variable.
THEN, the variable must return to its original Box Color, using onmouseout.
(for demonstrative purposes only, in Box#1 we've used a random onmouseover color).
You'll notice that when hovering;
the padding area turns light blue, while the text area HOVERS White.
the reason is because we didn't use the same exact onmouseover color as MAKES-WHITE.

So, just before the content,
a normal tag is placed which changes the color when HOVERING.

(A)
example:
<div class="Makes-White">

text here<br>
text here<br>

content </div>
Then, place the tag within each row:
<div class="Makes-White">

text here<br>
text here<br> 
</div>
<div class="Makes-White">

text here<br>
text here<br> (etc. etc)
 </div>
<div class="Makes-White">

text here<br>
text here<br> etc. etc
 </div>
(B)
The CSS code must also be implemented-
.Makes-White:hover {background: white; border-radius:6px;  }

<div onmouseout="this.style.backgroundColor='rgba(239,244,243, 1.0)'" onmouseover="this.style.backgroundColor='white'" style="background-color: rgba(239 , 244 , 243 , 1.0); border-left-color: rgba(10 , 10 , 10 , 0.9); border-left-width: 1.1px; border-radius: 3px; border-radius: 6px; border-right-color: rgba(10 , 10 , 10 , 0.9); border-right-width: 1.1px; border: solid rgba(5 , 5 , 5 , 1.0) 1.0px; box-shadow: inset 0px 0px 4px 3px rgba(109 , 115 , 117 , 0.07); color: #423d4c; font-size: 15px; margin-left: 0.3px; margin-right: 0.3px; padding: 0px 8px 0px 8px; text-align: justify;">
<center>
<div class="cursor-makes-whiter">
 etc. etc.

You'll notice that the onmouseover color above is basically the same as Makes-white tag.
and, the onmouseout color should be the same as your original inner-box color.
This enables it to look seamless and perfect.

Box#2 is a good example.  
It begins with a soft blueish White; and returns to the same color.
rgba(239,244,243, 1.0) is the background-color of box#2, AND the onmouseout color.

In Box #3, we deliberately got the colors slightly wrong, for demonstrative purposes only.
This shows where the variable works.

finally, Box#4 is also a good example of correct variables being used.

-----------------------------------------------------------------------
So, here's the complete code being used for example #6:

first; 
add CSS for "Makes-White", or, "cursor-makes-whiter"... or any desired name.

text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>

</div>
</center>
</div>
</div>
</td>                                                                                          
<td align="" colspan="1" rowspan="1" valign="top" width="25%"><div onmouseout="this.style.backgroundColor='rgba(180,180,180, 0.8)'" onmouseover="this.style.backgroundColor='rgba(192,194,176, 1.0)'" style="background-color: rgba(180 , 180 , 180 , 0.8); border-left-color: rgba(55 , 55 , 55 , 0.5); border-left-width: 0.4px; border-radius: 5px; border-right-color: rgba(55 , 55 , 55 , 0.5); border-right-width: 0.4px; border: solid rgba(105 , 102 , 102 , 1.0) 1px; box-shadow: 3px 0px 15px 3px rgba(29 , 63 , 72 , 0.01); padding: 3px 0.4px 3px 0.7px; text-align: justify;">
<div onmouseout="this.style.backgroundColor='rgba(239,244,243, 1.0)'" onmouseover="this.style.backgroundColor='white'" style="background-color: rgba(239 , 244 , 243 , 1.0); border-left-color: rgba(10 , 10 , 10 , 0.9); border-left-width: 1.1px; border-radius: 3px; border-radius: 6px; border-right-color: rgba(10 , 10 , 10 , 0.9); border-right-width: 1.1px; border: solid rgba(5 , 5 , 5 , 1.0) 1.0px; box-shadow: inset 0px 0px 4px 3px rgba(109 , 115 , 117 , 0.07); color: #423d4c; font-size: 15px; margin-left: 0.3px; margin-right: 0.3px; padding: 0px 2px 0px 2px; text-align: justify;">
<center>
                               
   <div class="cursor-makes-whiter">

text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>

</div>
</center>
</div>
</div>
</td>                                                                                                  
<td align="" colspan="1" rowspan="1" valign="top" width="25%"><div onmouseout="this.style.backgroundColor='rgba(180,180,180, 0.8)'" onmouseover="this.style.backgroundColor='rgba(192,194,176, 1.0)'" style="background-color: rgba(180 , 180 , 180 , 0.8); border-left-color: rgba(55 , 55 , 55 , 0.5); border-left-width: 0.4px; border-radius: 5px 9px 9px 5px; border-right-width: 0.4px; border: solid rgba(105 , 102 , 102 , 1.0) 1px; box-shadow: 9px 5px 14px 10px rgba(29 , 63 , 72 , 0.02); padding: 3px 3px 3px 0.7px; text-align: justify;">
<div onmouseout="this.style.backgroundColor='rgba(244,239,236, 1.0)'" onmouseover="this.style.backgroundColor='rgba(255,255,255, 0.9)'" style="background-color: rgba(244 , 236 , 239 , 1.0); border-left-color: rgba(10 , 10 , 10 , 0.9); border-left-width: 1.1px; border-radius: 6px; border: solid rgba(5 , 5 , 5 , 1.0) 1.2px; box-shadow: inset 0px 0px 4px 3px rgba(109 , 115 , 117 , 0.07); color: #423d4c; font-size: 15px; margin-left: 0px; padding: 5px 2px 7px 2px; text-align: justify;">
<center>
                                                
 <div class="cursor-makes-whiter">

text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>
text here<br>

</div>
</div>
</td>

</tr>
</tbody></table>
</div>
</div>

text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here

text here
text here
text here
text here
text here
text here
text here
text here
text here
text here
text here

text here
text here
text here
text here
text here
text here
text here
text here
text here
text here

Example 7
Clearly, using Variables resolves the problem of improper padding color.
These variable codes are supposed to return to its original Box-Color.
However; we can substitute it with an oddball combination for demonstration only.

Box#1 begins with a normal color.
Then, when dragging your cursor, the text-field becomes white.
BUT, when removing the cursor, the field does NOT return to its normal color.
That's because I failed to correctly alter the onmouseout code.
Instead, I accidentally made it a few shades darker.

Box#2 is normal.

But- In box#3, I really went overboard.
I turned the onmouseout to color=black.

----------------
For Box#3, notice how onmouse out becomes color Black. 
onmouseout="this.style.backgroundColor='black'"
This means, it will always return to that color.  (yikes!)
SO, the inner text might become difficult to read.

---------

here's the complete code of Box#3-

</div>

Example 8
Choosing your HOVER color is strictly a matter of choice.
Most examples here show the text-field becoming WHITER when highlighted.
But this doesn't need to be the only method available.

THIS TIME; 
The initial boxes will be colored WHITE.
and, when highlighted; they become another color.  
(B)
In boxes #1 and #2,
it turns into a mild blue when HOVERED.
But, in box  #2, our onmouseover code is slightly inaccurate.
As a result; You can see the outer padding.
It's a slightly darker shade of blue.
(C)
Box #3 becomes a shade of mild pink. 
You'll also notice slight imperfections because didn't create an identical onmouseover.
That's why it's important to match both features accurately.

(D)
the actual code being used for hovering boxes.

</style>

(E)
One final note: 
You'll notice that Box #1 and box #3 are an off-White color when not highlighted.
While Box#2 is solid White.  The whitest possible color.
The Hex code for White is #ffffff. 
 The rgb code is rgb(255,255,255)
 RGBA code is rgba(255,255,255, 1.0)

Usually though, I prefer using off-white rather than solid White.

Example 9
The onmouseover feature is the ONLY method we're using alter the gray OUTER boxes.

Within the text-boxes, 
we've been using TAGS and CSS CLASS in order to change the highlighted text field.

However, when altering the OUTER areas of each box; we solely use VARIABLES.
(B)
In the following 3 examples, we'll create big differences in order to emphasize the features.
(the outside of Box#1 becomes a florescent blue).
(the outside of Box#2 becomes dark purple).
(the outside of Box#3 becomes green).

This is using variables within the HTML code.

Here's an example:
To begin- 
The Outer-boxes are a darkish gray prior to hovering over them with your cursor.

Then, when your cursor scrolls over the box-
The florescent blue hovering outside of Box#1 is the following variable. 
 onmouseover="this.style.backgroundColor='rgba(92,194,176, 1.0)'"

etc. etc. etc. etc.

Example 10
Let's continue focusing on the outer boxes.
Once again;
When highlighting outer-boxes below, the only method being used are VARIABLES.

Example 11

Example 12
We can experiment with more defined changes.
(although I prefer barely noticeable differences).

Example 13

So, here was my original Listing:

final example.
The outer HOVER below is better defined (outside all 4 boxes).
and, the entire text field becomes solid White when HOVERED.

------------------------------------------------

I'm breaking down the HTML and css code

Monday, January 7, 2019

Cursor hovering over / changing color

No comments:

Blog Archive