當元素集中時，PNG箭頭消失

我真的需要你的幫助。我正在抓我的頭髮，試圖找出我手邊的問題的根源。我附上了一張圖片，下面顯示了我試圖用HTML編碼實現的前（左）和後（右）。以及僅供參考，非活動/未聚焦元素的圖片。當用戶關注元素時，如何保持右側的箭頭並更改背景顏色？當元素集中時，PNG箭頭消失

這裏是一個fiddle

這裏是將其全部的代碼：

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script src="jquery-1.11.3.min.js"></script> 

<style type="text/css"> 
* { 
    font-family: Segoe UI; 
    font-size: 9pt; 
} 
.select { 
    margin: 0; 
    padding: 0; 
} 
.select dd, .select dt, .select ul { 
    margin: 0px; 
    padding: 0px; 
} 
.select dd { 
    position: relative; 
} 
.select a, .select a:visited { 
    color: #000; 
    text-decoration: none; 
    outline: none; 
} 
.select dt:hover, .select dd ul:hover { 
    border-color: rgb(128,128,128); 
} 
.select dd ul li a:hover { 
    background-color: rgb(112, 146, 190); 
    color: #FFF; 
} 
.select dt { 
    background: url(arrow.png) no-repeat scroll right center; 
    display: block; 
    padding-right: 20px; 
    border: 1px solid rgb(170, 170, 170); 
    width: 180px; 
    overflow: hidden; 
} 
.select dt span { 
    cursor: pointer; 
    display: block; 
    padding: 4px; 
    height: 15px; 
} 
.select dd ul { 
    background: #fff none repeat scroll 0 0; 
    border-bottom: 1px solid rgb(170, 170, 170); 
    border-left: 1px solid rgb(170, 170, 170); 
    border-right: 1px solid rgb(170, 170, 170); 
    border-top: 0; 
    display: none; 
    left: 0px; 
    padding: 5px 0px; 
    position: absolute; 
    top: -1px; 
    width: auto; 
    min-width: 200px; 
    list-style: none; 
} 
.select dd ul li a { 
    padding-left: 10px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    display: block; 
} 
.selected { 
    background: rgb(195, 195, 195); 
} 
.header-list, .header-list:hover { 
    padding-left: 3px; 
    font-weight: bold; 
    font-style: italic; 
    cursor: pointer; 
} 

</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $(".select dt").click(function(e) { 
     e.stopPropagation(); 
     var select = $(this).closest('.select'); 
     select.find('ul').toggle(); 
     select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)') 

     select.find("dt, span, dd ul").css('background', 'rgb(255,255,196)') 


    }); 

    $(".select dd ul li a").click(function(e) { 
     var text = $(this).html(); 
     var select = $(this).closest('.select'); 

     if ((select.data('val') == 'multiple') && (e.ctrlKey)) { 
      e.stopPropagation() 
      $(this).addClass('selected'); 
      select.find('dt span').html("(" + select.find('a.selected').length + ")"); 
      //select.find('dt span').html(get_data_array(select.find('dd ul').attr('id')).join(",")) Comma-Seperated List 
     } 
     else { 
      var text = $(this).html(); 
      select.find("dd a").removeClass('selected'); 
      $(this).addClass('selected'); 
      select.find("dt span").html(text); 
      //select.find("dt a").css("background-color", ""); 
      select.find("dd ul").hide(); 
     } 
    }); 

    $(document).bind('click', function() { 
     $(".select dd ul").hide(); 
     $(".select dt, .select dd ul").css('border-color', ''); 
    }); 

}); 
</script> 

</head> 

<body> 

    <dl class="select"> 
    <dt><span id="vegetables"></span></dt> 
    <dd> 
     <ul> 
      <li><a data-val="" href="#">&nbsp;</a></li> 
      <li><a href="#">Carrots</a></li> 
      <li><a href="#">Celery</a></li> 
      <li><a href="#">Brocoli</a></li> 
     </ul> 
    </dd> 
</dl> 



</body> 

</html>

來源

2016-02-22 BobbyJones

普羅蒂普：使該代碼可運行片斷（編輯的問題，點擊「插入片段按鈕」），使人們看不到的代碼塊巨型帶滾動條，並可以直接在你的問題中運行它。 –

如果它對你有所幫助，在鉻中打開你的小提琴根本不會顯示任何箭頭 - 專注或以其他方式。 – Polyducks

設置background-color代替background。

DEMO

select.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')

來源

2016-02-22 19:57:15 RRK

當元素集中時，PNG箭頭消失

回答

相關問題