jQuery css()函数更改'a'属性而不是'a:hover'属性

时间:2009-05-08 00:43:04

标签: javascript jquery html css dynamic-css

目前我在使用jQuery css()函数时遇到了一些麻烦。当悬停时,它正在改变锚元素的border-top-color的css值,而不仅仅是锚元素的border-top-color。以下是我的代码。

$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");

为什么它会更改#header #headerlist li a border-top-color和#header #headerlist li a:hover属性而不仅仅是#header #headerlist li a:hover属性?

5 个答案:

答案 0 :(得分:20)

你的例子不起作用的原因是因为选择器无法检测:hover因为那是一个纯CSS的东西。相反,您可以尝试使用实际的jquery hover method

$("#header #headerlist li a").hover(
  function () {
    $(this).css("border-top-color", "#FF0000");
  }, 
  function () {
    $(this).css("border-top-color", "#000000");
  }
);

或者,您也可以使用addclass方法:

$("#header #headerlist li a").hover(
  function () {
    $(this).addClass('hover-highlight');
  }, 
  function () {
    $(this).removeClass('hover-highlight');
  }
);

这可以进一步简化为:

$("#header #headerlist li a").hover(function () {
    $(this).toggleClass('hover-highlight');
});

答案 1 :(得分:12)

我不确切知道为什么,但这种类型的更改在CSS中做得更好,所以我建议,如果你真的需要通过JS改变它,创建一个CSS类,然后在JS中更改它。

CSS

#header #headerlist li a.fancy-border:hover{
  border-top-color: rgb(225, 149, 79);
}

JS

$("#header #headerlist li a").addClass("fancy-border");

通过这种方式,您可以更好地将功能与演示文稿分开。

答案 2 :(得分:1)

它不起作用的原因是因为:hover位实际上没有给选择器任何关于元素的信息。

CSS中的

a:hover匹配与a完全相同的元素,它只是为用户将鼠标悬停在这些元素上时定义了一组不同的属性。

jQuery选择器用于查找(选择)元素,而不是为它们设置样式。

css()方法只是在所选元素上设置内联样式,添加或更改任何实际的CSS声明。

正如其他人所提到的,您可以使用hover()事件来获得相同的行为。尽管如此,正如另一位回答者所描述的那样,在飞行中添加一个类可能更好。

但是,如果您不需要即时更改它,我建议使用普通的旧CSS,因为它更快,并且不需要用户启用javascript。

答案 3 :(得分:0)

此代码自1.9以来已被破解

if($('...').is(':hover')){
  $(this).css('set','your styles here')
}

使用此代替

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}

答案 4 :(得分:0)

添加!重要的悬停css以避免样式被覆盖。 例如:



import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class DataParse {


private static List<String> uids;


public static List<DataModal> parseFeed(String content) {
    try {

            List<DataModal> dataList = new ArrayList<>();
            uids = new ArrayList<>();

            //get root node
            JSONObject data = new JSONObject(content);
            if(data.has("users")&& data.has("visited")&& !data.isNull("users")&& !data.isNull("visited")){
                // We get parent nodes
                JSONObject userObj = data.getJSONObject("users");
                JSONObject visitedObj = data.getJSONObject("visited");

                //get map from JSON object for its keys
                JSONToMap jtm = new JSONToMap();
                Map<String,Object> userId =  jtm.jsonToMap(userObj);

                //these are the keys from all the users
                Set<String> userKeys = userId.keySet();

                uids.addAll(userKeys);

                for(Iterator i = userKeys.iterator();i.hasNext();){

                    //boolean test = visitedObj.isNull(i.next().toString());

                    if(visitedObj.isNull(i.next().toString())||!visitedObj.has(i.next().toString())){

                        continue;
                    }                   
                    else{

                        JSONObject visitedDatauid = visitedObj.getJSONObject(i.next().toString());
                        //get map from JSON object for its keys

                        JSONToMap jtmPushKeys = new JSONToMap();
                        Map<String,Object> pushKeys =  jtmPushKeys.jsonToMap(visitedDatauid);
                        Set<String> pKeys = pushKeys.keySet();
                        //iterate through uid -> unique keys from push in android
                            for(Iterator j = pKeys.iterator();j.hasNext();)
                            {

                                //access push key 'j' data for particular uid 'i'
                                if(!(visitedDatauid.isNull(j.next().toString()))&& (visitedDatauid.has(j.next().toString()))){

                                    JSONObject visitdata = visitedDatauid.getJSONObject(j.next().toString());

                                    //String uidIter = i.next().toString(); 


                                            //JSONObject user = userObj.getJSONObject(i.next().toString());

                                            //Get data from JSONObjects and store in Strings
                                            String uid="",username="",email="",placevisited="",lat="",lon="", condition ="";

                                            //String uid="",username="",email="",placevisited="",lat="",lon="", condition ="";

                                            uid = visitdata.getString("uid");
                                            username = visitdata.getString("username");
                                            //email = user.getString("email");
                                            placevisited = visitdata.getString("placeVisited");
                                            lat = visitdata.getString("latitude");
                                            lon = visitdata.getString("longitude");
                                            condition = visitdata.getString("condition");

                                            //DataModal dm = new DataModal(email,uid,username,lat,lon,placevisited,condition);
                                            DataModal dm = new DataModal(uid,username,lat,lon,placevisited,condition);
                                            dataList.add(dm);

                                        }

                                    else{

                                        System.err.println("Visited key:"+j.next().toString()+" do not exist in Visited");

                                        String uid="",username="",email="",placevisited="",lat="",lon="", condition ="";

                                        //String uid="",username="",email="",placevisited="",lat="",lon="", condition ="";

                                        uid = i.next().toString();
                                        username = "NA";
                                        email = "NA";
                                        placevisited = "NA";
                                        lat = "NA";
                                        lon = "NA";
                                        condition = "NA";

                                        DataModal dm = new DataModal(uid,username,lat,lon,placevisited,condition);
                                        dataList.add(dm);
                                        continue;
                                    }

                                }

                            }
                        }               
                }


            return dataList;
    } catch (JSONException e) {
        e.printStackTrace();
        return null;
    }

}
&#13;
&#13;
&#13;