CODEWITHSUNDEEP
javascripthtmlcssonmouseover
DoNotPutMeInABox
DoNotPutMeInABox

Reputation: 85

HTML and JS Conflicting Elements (MouseOver)

I'm attempting to have an element in my layout to change text and background colors onMouseOver, and then revert to their original state when rolled off. The problem is that JS doesn't seem to recognize the nature of my CSS.

The element (#sidebar) has these pieces of CSS code (code of the sidebar itself not relevant):

#sidebar ul {
list-style-type: none;
}

#sidebar li {
    width:100px;
    border-radius: 25px;
    text-align: center;
    background-color: #AFCEEA;
    border: 5px solid #195A94;
    font-weight: bold;
    line-height: 50px;
    margin-top: 10px;
    margin-left: 5px;
}

And it looks like this, prior to OnMouseOver:

enter image description here

This is the JS I'm using to attempt the onMouseOver:

<script type="text/javascript">
    function changeColor(myColor) {
    var sidebar = document.getElementById('sidebar li');
    sidebar.style.fontcolor = "#6588C7";
    sidebar.style.backgroundColor = "#6588C7";
}
</script>

With this implementation in the div:

<div id ="sidebar li">
    <ul><li onmouseover="changeColor('new color')"><p class="class1">writing<p></li></ul>
</div>

But it does this to my sidebar instead:

enter image description here

How can I get the color to stay in the little boxes?

Upvotes: 0

Views: 92

Answers (6)

Gerard
Gerard

Reputation: 15786

You can really simplify your code by using :hover instead of onmouseover.

I am using a flexbox for li to make center alignment easy. You do not longer need to suppress the list-style because the list items are no longer displayed as a list-item.

You may no longer need class1 for the paragraphs. I just kept them in.

function changeText(myText) {
  //find variable on page called 'myContent' and give it var name display 
  var display = document.getElementById('content'); 
  display.innerHTML = ""; 
  display.innerHTML = "New content.";
}
#sidebar li {
  width: 100px;
  height: 100px;
  border-radius: 25px;
  background-color: #AFCEEA;
  border: 5px solid #195A94;
  font-weight: bold;
  display: flex;
  align-items: center; /* Vertical alignment */
  justify-content: center; /* Horizontal alignment */
}

#sidebar li:hover {
  background-color: red;
}
/* Apply top margin to all list elements except for the first one */
#sidebar li:not(:first-child) {
  margin-top: 10px;
}

#content { 
  border-radius: 25px; 
  width: 750px; 
  height: 500px; 
  margin-top: 50px; 
  margin-left: 300px; 
  background-color: azure; 
  padding: 50px; 
}
<div id="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
    </li>
    <li>
      <p class="class1">games/art<p>
    </li>
    <li>
      <p class="class1">music<p>
    </li>
  </ul>
</div>

<div id="content" onclick="changeText()"> <p>Content here.</p> </div>

Upvotes: 2

ElJackiste
ElJackiste

Reputation: 4591

Based on your code you could do :

#sidebar ul {
  list-style-type: none;
}

#sidebar li {
  width: 100px;
  border-radius: 25px;
  text-align: center;
  background-color: #AFCEEA;
  border: 5px solid #195A94;
  font-weight: bold;
  line-height: 50px;
  margin-top: 10px;
  margin-left: 5px;
}
<div id="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
    </li>
  </ul>
</div>

<script type="text/javascript">
  function changeColor(e) {
    var sidebar = e.currentTarget;
    sidebar.style.color = "#fff";
    sidebar.style.backgroundColor = "#6588C7";
  }

  var li_elements = document.getElementById('sidebar').getElementsByTagName('li');
  for (var i = 0; i < li_elements.length; i++) {
    li_elements[i].addEventListener('mouseover', changeColor);
  }
</script>

But a simpler solution is to remove the JavaScript and to just do it with CSS :

#sidebar ul {
  list-style-type: none;
}

#sidebar li {
  width: 100px;
  border-radius: 25px;
  text-align: center;
  background-color: #AFCEEA;
  border: 5px solid #195A94;
  font-weight: bold;
  line-height: 50px;
  margin-top: 10px;
  margin-left: 5px;
}

#sidebar li:hover {
  color: #fff;
  background-color: #6588C7;
}
<div id="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
    </li>
  </ul>
</div>

Upvotes: 0

Avat Rezaei
Avat Rezaei

Reputation: 153

div id name is incorrect 

var sidebar = document.getElementById('sidebar-li');

<script type="text/javascript">
 function changeColor(myColor) {
  var sidebar = document.getElementById('sidebar-li');
  sidebar.style.fontcolor = "#6588C7";
  sidebar.style.backgroundColor = "#6588C7";
 }
 </script>

and

<div id ="sidebar-li">
   <ul>
       <li onmouseover="changeColor('#ffffff')">
            <p class="class1">writing<p>          
       </li> 
   </ul>
</div>

Upvotes: 0

VilleKoo
VilleKoo

Reputation: 2854

You don't need javascript for something as trivial as this. You could use :hover CSS pseudo-class. Read more about it here

#sidebar ul {
list-style-type: none;
}

#sidebar li {
    width:100px;
    border-radius: 25px;
    text-align: center;
    background-color: #AFCEEA;
    border: 5px solid #195A94;
    font-weight: bold;
    line-height: 50px;
    margin-top: 10px;
    margin-left: 5px;
}

#sidebar li:hover {
  color: tomato;
  background: #333
}
<div id ="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
     </li>
     <li>
      <p class="class1">writing 2<p>
     </li>
  </ul>
</div>

Upvotes: 0

Resheta Ahmed Smrity
Resheta Ahmed Smrity

Reputation: 16

Your div id is not correct. It should be like this:

<div id ="sidebar">
    <ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>

Upvotes: 0

Firman Wijaya
Firman Wijaya

Reputation: 186

getElementById accepts id argument, but you are passing it a selector instead. You may want to use document.querySelector instead. Query selector documentation: Query Selector

Upvotes: 0

Related Questions