Question

我有几张照片，其中一张是MAIN照片。

我写了一个javascript，其中onclick更改了mainc照片。

这是html：

 <img src="http://tyche.ge/some/1.jpg" id="one" width="385px" onclick="showDiv()" />

 <table cellpadding="0" cellspacing="0" id="miniphotos" border="0">
 <tr>
 <td><img src="http://tyche.ge/some/1.jpg" id="FirstPhoto" onclick="One()" style="border: 1px solid #eea7a6;" /></td>
 <td><img src="http://tyche.ge/some/2.jpg" id="SecondPhoto" onclick="Two()" /></td>
 <td><img src="http://tyche.ge/some/3.jpg" id="ThirdPhoto" onclick="Three()" /></td>
 <td><img src="http://tyche.ge/some/4.jpg" id="FourthPhoto" onclick="Four()" /></td>
</tr>
</table>

这是CSS：

table#miniphotos img {
width: 91px;
height: 51px;
border: 1px solid #e1e1e1;
cursor: pointer;
border-radius: 3px;
}

table#miniphotos img:hover {
border: 1px solid #c1c1c1;
}

和javascript：

 var one = document.getElementById('one');
 var first = document.getElementById('FirstPhoto');
 var second = document.getElementById('SecondPhoto');
 var third = document.getElementById('ThirdPhoto');
 var fourth = document.getElementById('FourthPhoto');
 var fifth = document.getElementById('FifthPhoto');
 function One()
    {
        one.src=document.getElementById('FirstPhoto').src;
        first.style.border='1px solid #eea7a6';
        second.style.border='1px solid #e1e1e1';
        third.style.border='1px solid #e1e1e1';
        fourth.style.border='1px solid #e1e1e1';
        fifth.style.border='1px solid #e1e1e1';
    }

  function Two()
    {
        one.src=document.getElementById('SecondPhoto').src;
        first.style.border='1px solid #e1e1e1';
        second.style.border='1px solid #eea7a6';
        third.style.border='1px solid #e1e1e1';
        fourth.style.border='1px solid #e1e1e1';
        fifth.style.border='1px solid #e1e1e1';
    }

 function Three()
    {
        one.src=document.getElementById('ThirdPhoto').src;
        first.style.border='1px solid #e1e1e1';
        second.style.border='1px solid #e1e1e1';
        third.style.border='1px solid #eea7a6';
        fourth.style.border='1px solid #e1e1e1';
        fifth.style.border='1px solid #e1e1e1';
    }
 function Four()
    {
        one.src=document.getElementById('FourthPhoto').src;
        first.style.border='1px solid #e1e1e1';
        second.style.border='1px solid #e1e1e1';
        third.style.border='1px solid #e1e1e1';
        fourth.style.border='1px solid #eea7a6';
        fifth.style.border='1px solid #e1e1e1';
    }
 function Five()
    {
        one.src=document.getElementById('FifthPhoto').src;
        first.style.border='1px solid #e1e1e1';
        second.style.border='1px solid #e1e1e1';
        third.style.border='1px solid #e1e1e1';
        fourth.style.border='1px solid #e1e1e1';
        fifth.style.border='1px solid #eea7a6';
    }

这是JSfiddle更好地解释我需要的东西。

http://jsfiddle.net/zsd4s4ce/

（请点击小照片以便更好地理解）。

mainc javascript有效，但是当主要照片发生变化时，CSS hover无效。我不明白为什么。

在执行悬停工作的javascript函数之前。

感谢您的关注

Answer 1

这是因为添加了javascript的样式最终成为内联样式，因此与外部css相比具有优先级。如果你在css中添加！important，你可以改变它：http://jsfiddle.net/zsd4s4ce/1/

table#miniphotos img:hover {
    border: 1px solid #c1c1c1 !important;
}

更好的方法是使用类来指示选择哪一个，并使用js添加/删除类。这样你就可以避免整个css特异性的噩梦。 http://jsfiddle.net/zsd4s4ce/10/

    var elements = document.querySelectorAll("td img");


function addClass(elem){
for (var i = 0, l = elements.length; i < l; i++) {
    elements[i].classList.remove("selected")
}
elem.classList.add("selected");
}
for (var i = 0, l = elements.length; i < l; i++) {
elements[i].addEventListener("click", function(e) {
    e.preventDefault();
    addClass(this);

})
}

Answer 2

更好的选择是将类添加到需要红色边框的元素中，并避免编写这么多代码。然后在您的CSS中，只需将所需的样式添加到单击时附加的类。

HTML：

<img src="http://tyche.ge/some/1.jpg" id="one" width="385px" onclick="showDiv()" />

<table cellpadding="0" cellspacing="0" id="miniphotos" border="0">
<tr>
<td><img src="http://tyche.ge/some/1.jpg" class="photo" id="FirstPhoto" /></td>
<td><img src="http://tyche.ge/some/2.jpg" class="photo" id="SecondPhoto"  /></td>
<td><img src="http://tyche.ge/some/3.jpg" class="photo" id="ThirdPhoto" /></td>
<td><img src="http://tyche.ge/some/4.jpg" class="photo" id="FourthPhoto" /></td>
</tr>
</table>

CSS：

.photo {
    width: 91px;
    height: 51px;
    border: 1px solid #e1e1e1;
    cursor: pointer;
    border-radius: 3px;
}

.photo:hover {
    border: 1px solid #c1c1c1;
}

.photo.selected{ border: 1px solid red; }

jQuery的：

$(".photo").click(function() {
    $(".photo").removeClass("selected");
    $(this).toggleClass("selected");
});

<强> EXAMPLE

Answer 3

目前的问题是因为

table#miniphotos td img:hover {
    border: 1px solid #000 !important;
}

因为JS添加的样式更先待。

更新的代码更少杂乱

var element = document.getElementsByClassName("insideImage");
function One(a)
    {
        [].forEach.call(element, function(val){
            val.style.border='1px solid #e1e1e1';
        });

        a.style.border='1px solid #eea7a6';
    }

只需制作代码的单一副本。

<强> Fiddle

javascript更改元素样式

3 个答案: