目前我在使用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
属性?
答案 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中更改它。
#header #headerlist li a.fancy-border:hover{
border-top-color: rgb(225, 149, 79);
}
$("#header #headerlist li a").addClass("fancy-border");
通过这种方式,您可以更好地将功能与演示文稿分开。
答案 2 :(得分:1)
它不起作用的原因是因为:hover
位实际上没有给选择器任何关于元素的信息。
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;