Question

我是初学者我之前的元素左侧属性值在Firefox中正确显示但在chrome中没有正确显示。浏览器之间有1或2个像素不同。在此部分中，在图像正确显示之前，其他圆圈悬停，但最后一个圆圈没有正确显示。

CSS Code Here

.choose_color {
    border-bottom: 1px solid #ebebeb;
    padding: 3% 0;
}
.choose_size > h4 {
    font-size: 16px;
    padding-bottom: 2%;
}
.choose_size select {
    border: 1px solid #ebebeb;
    padding: 1%;
}
.choose_size{
    border-bottom: 1px solid #ebebeb;
    padding: 2% 0;
}
.choose_color h4 {
    text-transform: uppercase;
    font-size: 16px;
    padding-bottom: 2%;
}
.img-for-hover1{
   display: none;
}
.img-for-hover2{
   display: none;
}
.img-for-hover3{
   display: none;
}
.img-for-hover4{
   display: none;
}
.choose_color nav ul li a{
    padding:0 3px;
}
.choose_color nav ul li a:hover .img-for-hover1 {
    bottom: 84px;
    display: block;
    left: 13px;
}
.choose_color nav ul li a:hover .img-for-hover2 {
    bottom: 84px;
    display: block;
    left: 44px;
}
.choose_color nav ul li a:hover .img-for-hover3 {
    bottom: 84px;
    display: block;
    left: 76px;
}
.choose_color nav ul li a:hover .img-for-hover4 {
    bottom: 84px;
    display: block;
    left: 108px;
}

这是我的HTML代码

<div class="choose_color">
                                                <h4>Choose Color</h4>
                                                <nav>
                                                    <ul>
                                                        <li>
                                                            <a href="#">
                                                                <img src="resource/img/home_img/product_details_img/color-1.png" alt="color" class="pos-relative">
                                                                <img src="resource/img/home_img/product_details_img/color-1-hover.png" alt="color" class="img-for-hover1 pos-absolute">
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                <img src="resource/img/home_img/product_details_img/color-2.png" alt="color" class="pos-relative for-hide">
                                                                <img src="resource/img/home_img/product_details_img/color-2-hover.png" alt="color" class="img-for-hover2 pos-absolute">
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                <img src="resource/img/home_img/product_details_img/color-3.png" alt="color" class="pos-relative">
                                                                <img src="resource/img/home_img/product_details_img/color-3-hover.png" alt="color" class="img-for-hover3 pos-absolute">
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#">
                                                                <img src="resource/img/home_img/product_details_img/color-4.png" alt="color" class="pos-relative">
                                                                <img src="resource/img/home_img/product_details_img/color-4-hover.png" alt="color" class="img-for-hover4 pos-absolute">
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>

截图

Answer 1

根本不需要绝对定位。

见这里：https://jsfiddle.net/4Lzhrhrq/

我简化了 HTML 并添加了相应的类：

$opts = array(
    'ssl' => array('ciphers'=>'RC4-SHA')
  );
$client = new SoapClient($CREDS['orderingWSDL'], array (
"encoding"=>"ISO-8859-1",
'stream_context' => stream_context_create($opts),
  'exceptions'=>true,
));

我简化了 CSS 并添加了相应的属性：

<div class="choose_color">
  <h4>Choose Color</h4>
  <nav>
    <ul>
      <li><a href="#" class="selection color-black active"><span></span></a></li>
      <li><a href="#" class="selection color-grey"><span></span></a></li>
      <li><a href="#" class="selection color-orange"><span></span></a></li>
      <li><a href="#" class="selection color-brown"><span></span></a></li>
    </ul>
  </nav>
</div>

为了演示，我添加了jQuery和这个小 JS ：

.choose_color {
    border-bottom: 1px solid #ebebeb;
    padding: 3% 0;
}
.choose_color h4 {
    text-transform: uppercase;
    font-size: 16px;
    padding-bottom: 2%;
}
.choose_color nav ul { list-style-type: none; }
.choose_color nav ul li { display: inline; }


.choose_color nav ul li a {
    display: inline-block;
    line-height: 0.1;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%;
}
.choose_color nav ul li a.color-black:hover, .choose_color nav ul li a.color-black.active {
  border-color: rgb(0,0,0);
}
.choose_color nav ul li a.color-grey:hover, .choose_color nav ul li a.color-grey.active {
  border-color: rgb(61,43,45);
}
.choose_color nav ul li a.color-orange:hover, .choose_color nav ul li a.color-orange.active {
  border-color: rgb(167,81,34);
}
.choose_color nav ul li a.color-brown:hover, .choose_color nav ul li a.color-brown.active {
  border-color: rgb(113,46,55);
}


.choose_color nav ul li a > span {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: inherit;
}
.choose_color nav ul li a.color-black > span {
    background-color: rgb(0,0,0);
}
.choose_color nav ul li a.color-grey > span {
    background-color: rgb(61,43,45);
}
.choose_color nav ul li a.color-orange > span {
    background-color: rgb(167,81,34);
}
.choose_color nav ul li a.color-brown > span {
    background-color: rgb(113,46,55);
}

在IE11，Chrome 50和FF 46中成功测试。

我选择在$('nav a.selection').click( function(e) { e.preventDefault(); $('nav a.selection.active').removeClass('active'); $(this).addClass('active'); });内添加span来指出它。我不知道你真正的标记。也许您使用a和隐藏的单选按钮您可以随时删除我示例中的label并使用伪元素（span或::before）。

我更新了小提琴，使用::after，label s（单选按钮）和input：https://jsfiddle.net/4Lzhrhrq/1/

属性不起作用之前的html

截图

1 个答案: