cssとajaxの質問です。

補足に記入したコードが色々試しているのですが、なかなか希望通り動作しなくて困っています。

(1)<span class="nextLike">&nbsp;</span> の部分ですがCSSで画像を指定しているのですが画像が表示されません。spanをdivに変更すると画像が表示されるのですが、なぜspanで表示されないかわからずにいます。なにか書き方でおかしいところはありますか?

(2)<span class="nextLike">&nbsp;</span> の半角スペースをクリックしてもjQueryが無反応です。いろいろ検索してみますが、何がおかしいのか辿り着けずにいます。

経験者の方ご指導よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/13 20:54:22
  • 終了:2013/10/15 11:21:26
id:appfb

質問者から

appfb2013/10/14 11:36:58
<!DOCTYPE html>
<html lang="ja">
<head>
	<{$content_type|smarty:nodefaults}>
	<link rel="stylesheet" href="<{$root_surl}>css/master.css" type="text/css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
//--- ajax
function postLike(){
	var fb_id = '<{$fb_id}>';
	var quiz_id = '<{$quiz_id}>';
	$.ajax({
		type: 'post',
		url: 'question.php',
		data: {fbid:fb_id, quizid:quiz_id},
		success: function(data){
		},
		error: function(jqXHR, status, error){
		}
	});
}
$(function(){
	$("span.nextLike").click(postLike);
});
	</script>

	<style type="text/css">
	<!--
.nextLike {
	background: url(../images/likeButton.png) no-repeat 0 0;
	width: 40px;
	height: 40px;
	_width: 40px;
	_height: 40px;
	cursor: pointer;
}
.nextLike:hover {
	background-position: 0px -40px;
}

	-->
	</style>
</head>

<body>

	<span class="nextLike">&nbsp;</span>

</body>
</html>

ベストアンサー

id:nobuoka No.1

nobuoka回答回数9ベストアンサー獲得回数52013/10/13 21:08:02

ポイント100pt

(1) についてですが、span 要素はインライン要素なので、CSS の width プロパティや height プロパティで幅や高さを指定しても無視されます。 背景画像が表示されないのではなくて、要素の大きさが期待通りの大きさになっていないのではないでしょうか?

他2件のコメントを見る
id:appfb

ありがとうございます。
早速試してみます。

2013/10/13 21:26:56
id:appfb

できましたーー!
勉強になりました。
早速インライン要素について念入りに読んでみます。
ありがとうございました。

2013/10/13 21:33:59

その他の回答(0件)

id:nobuoka No.1

nobuoka回答回数9ベストアンサー獲得回数52013/10/13 21:08:02ここでベストアンサー

ポイント100pt

(1) についてですが、span 要素はインライン要素なので、CSS の width プロパティや height プロパティで幅や高さを指定しても無視されます。 背景画像が表示されないのではなくて、要素の大きさが期待通りの大きさになっていないのではないでしょうか?

他2件のコメントを見る
id:appfb

ありがとうございます。
早速試してみます。

2013/10/13 21:26:56
id:appfb

できましたーー!
勉強になりました。
早速インライン要素について念入りに読んでみます。
ありがとうございました。

2013/10/13 21:33:59

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません