Question

我有翻转的问题，并将光标更改为悬停在两个图像上的手，这是我用于隐藏/显示的代码：

<div class="listing">
<span style="float:right; margin:-10px 100px 0px 20px;">Change view:&nbsp;</span>
<input class="listing" id="List" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="listing" for="List"> 
<img src="/devsite/images/icons/row.png" alt="List" title=" List " border="0"></label>


<input class="listing" id="Grid" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="listing" for="Grid">
<img src="/devsite/images/icons/table.png" alt="Grid" title=" Grid " border="0"> </label>
</div>

    <div id="formdiv"  style="display: block;"> some stuff </div>

    <div id="formdiv2"  style="display: block;">    some different stuff </div>

javascript：

<script language="javascript">
function hideForm(){
if (document.getElementById('List').checked==true){
  document.getElementById('formdiv').style.display="block";
  document.getElementById('formdiv2').style.display="none";
} else {
  document.getElementById('formdiv').style.display="none";
  document.getElementById('formdiv2').style.display="block";
};

if (document.getElementById('Grid').checked==true){
  document.getElementById('formdiv').style.display="none";
  document.getElementById('formdiv2').style.display="block";
} else {
  document.getElementById('formdiv').style.display="block";
  document.getElementById('formdiv2').style.display="none";
};


}

</script>

我需要的是翻转光标更改，以及所选单选按钮上的背景颜色更改...隐藏/显示可见正常工作

Answer 1

对于background颜色更改，您可以使用：

YourElement.style.background = "#000000"

cursor更改：

YourElement.style.cursor = "type"

对于不同类型的光标：cursor types doc

Answer 2

要在悬停时显示光标，请尝试以下css：

img:hover {
cursor:pointer;
}

对于后台，使用jquery可以执行以下操作：

$("#elementid").css("background", "#000000")

Answer 3

我已将无线电代码更改为：

<span style="float:right; margin:-10px 100px 0px 20px;">Change view:&nbsp;</span>
<input class="listing" id="List" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="List" for="List"> 
<img src="/devsite/images/icons/row.png" alt="List" title=" List " border="0"></label>


<input class="listing" id="Grid" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="Grid" for="Grid">
<img src="/devsite/images/icons/table.png" alt="Grid" title=" Grid " border="0"> </label>

                        </span>

和javascript：

<script language="javascript">
function hideForm(){
if (document.getElementById('List').checked==true){
  document.getElementById('formdiv').style.display="block";
  document.getElementById('formdiv2').style.display="none";
  List.style.background = "#FFFFFF";
  Grid.style.background = "#111111";
  List.style.cursor = "pointer";
  Grid.style.cursor = "pointer";
} else {
  document.getElementById('formdiv').style.display="none";
  document.getElementById('formdiv2').style.display="block";
  List.style.background = "#111111";
  Grid.style.background = "#FFFFFF";
  List.style.cursor = "pointer";
  Grid.style.cursor = "pointer";
};

if (document.getElementById('Grid').checked==true){
  document.getElementById('formdiv').style.display="none";
  document.getElementById('formdiv2').style.display="block";
  List.style.background = "#111111";
  Grid.style.background = "#FFFFFF";
  List.style.cursor = "pointer";
  Grid.style.cursor = "pointer";
} else {
  document.getElementById('formdiv').style.display="block";
  document.getElementById('formdiv2').style.display="none";
    List.style.background = "#FFFFFF";
  Grid.style.background = "#111111";
    List.style.cursor = "pointer";
  Grid.style.cursor = "pointer";
};


}
</script>

这只是变得凌乱.....

Javascript翻转并隐藏页面的一部分

3 个答案: