मैं अपने लेआउट में एक तत्व रखने का प्रयास कर रहा हूं ताकि माउसओवर पर टेक्स्ट और पृष्ठभूमि रंग बदल सकें, और फिर लुढ़कने पर अपनी मूल स्थिति में वापस आ जाएं। समस्या यह है कि जेएस मेरे सीएसएस की प्रकृति को नहीं पहचानता है।

तत्व (#sidebar) में 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;
}

और यह इस तरह दिखता है, ऑनमाउसओवर से पहले:

enter image description here

यह वह जेएस है जिसका उपयोग मैं ऑनमाउसओवर का प्रयास करने के लिए कर रहा हूं:

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

Div में इस कार्यान्वयन के साथ:

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

लेकिन यह इसके बजाय मेरे साइडबार पर करता है:

enter image description here

मैं छोटे बक्से में रहने के लिए रंग कैसे प्राप्त कर सकता हूं?

0
DoNotPutMeInABox 10 अक्टूबर 2018, 08:40

4 जवाब

getElementById आईडी तर्क को स्वीकार करता है, लेकिन आप इसे इसके बजाय एक चयनकर्ता पास कर रहे हैं। आप इसके बजाय document.querySelector का उपयोग करना चाह सकते हैं। क्वेरी चयनकर्ता दस्तावेज़ीकरण: क्वेरी चयनकर्ता

0
Firman Wijaya 10 अक्टूबर 2018, 05:49

आपकी डिव आईडी सही नहीं है। यह इस तरह होना चाहिए:

<div id ="sidebar">
    <ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>
0
Resheta Ahmed Smrity 10 अक्टूबर 2018, 06:00

आपको इस तरह की तुच्छ चीज़ के लिए जावास्क्रिप्ट की आवश्यकता नहीं है। आप :hover 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: tomato;
  background: #333
}
<div id ="sidebar">
  <ul>
    <li>
      <p class="class1">writing<p>
     </li>
     <li>
      <p class="class1">writing 2<p>
     </li>
  </ul>
</div>
0
VilleKoo 10 अक्टूबर 2018, 06:04

आपके कोड के आधार पर आप यह कर सकते हैं:

#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>

लेकिन एक आसान उपाय यह है कि जावास्क्रिप्ट को हटा दिया जाए और इसे सीएसएस के साथ किया जाए:

#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>
0
ElJackiste 10 अक्टूबर 2018, 06:32