CSS - целевой текст связывается с нижней границей на парении, но ссылками изображения без границы
Хорошо, надеюсь, было бы более простое решение, но вот как я решил это. Я попытался здесь не создавать владельца для модели изображения, потому что модель изображения имеет PropertyPost в качестве родителя, у которого есть владелец. Таким образом, Image должен наследовать этого владельца:
class Image(models.Model):
prop_post = models.ForeignKey(
PropertyPost,
related_name='images4thisproperty',
on_delete=models.CASCADE)
prop_post_owner=models.CharField(max_length=150,null=True,blank=True)
, и это будет сериализатор:
class ImageSerializer(serializers.HyperlinkedModelSerializer):
prop_post = serializers.SlugRelatedField(queryset=PropertyPost.objects.all(),
slug_field='pk')
prop_post_owner = serializers.ReadOnlyField(source='prop_post.owner.username')
class Meta:
model = Image
fields = (
'pk',
'url',
'prop_post',
'prop_post_owner'
)
таким образом, моя модель изображения имеет владельца, который приходит из PropertyPost.
Теперь на уровне списка пользователь может создать объект, и так как неясно, какой объект пользователь выберет, пользовательские действия не будут выполнены. Наконец, вот как я запрещаю не владельцам создавать поле изображения для свойства:
class ImageList(generics.ListCreateAPIView):
queryset = Image.objects.all()
serializer_class = ImageSerializer
name = 'image-list'
....
def perform_create(self, serializer):
obj=PropertyPost.objects.get(pk=int(self.request.data['prop_post']))
if self.request.user!=obj.owner:
raise ValidationError('you are not the owner')
serializer.save(prop_post_owner=self.request.user)
7 ответов
Извините, вам нужно что-то вроде: родительский псевдокласс который выбирает дочерний элемент, но применяется к родительскому элементу, которого, к сожалению, не существует (даже в CSS3).
Вам придется немного поработать с Javascript,
Это невозможно с чистым CSS без добавления новых тегов. Чтобы сделать это с помощью чистого CSS / HTML, вам нужно будет добавить тег либо к ссылке [a href] изображения .., либо добавить тег к ссылкам [a hrer], которые вы хотите отобразить с подчеркиванием.
Вы можете написать небольшой фрагмент кода в javascript, который довольно легко изменит свойство border элемента при наведении курсора. Вам просто нужно проверить, является ли элемент IMG.
Вы не можете настроить таргетинг на элемент в зависимости от того, какие дочерние элементы у него есть, поэтому вам придется добавить что-то в код для нацеливания на разные ссылки.
Нельзя использовать подчеркивание вместо нижней границы? Это будет работать, если применить его к тексту в ссылке, а не к самому элементу ссылки.
#sidebar a:hover { text-decoration: underline; }
#sidebar a:hover img { text-decoration: none; }
Это может сработать
a img {position:relative; top: Npx}, where N is the hover border thickness
Это заставит изображение покрывать границу, хотя оно будет смещено вниз на пиксель или около того навсегда.
Это на самом деле кажется довольно сложной проблемой. Есть ли у вас возможность изменить код CMS? Это становится легко, если вы можете сделать что-то вроде обтекания вокруг любого текста внутри ссылок (и оставить изображения вне них). Тогда все, что вам нужно сделать, это нацелиться на #sidebar a: hover span , чтобы иметь границу.
Если вы не можете изменить код, я не уверен, возможно ли это. Я уверен, что ничего не могу придумать.
Что касается JavaScript, я бы предложил использовать jQuery для добавления класса ко всем ссылкам, которые содержат изображение:
$('#sidebar a:has(img)').addClass('image-link');
(Селектор :имеет; он не присутствует в CSS. )
Тогда настройте таблицу стилей соответственно.
#sidebar a:hover {
border-bottom: 1px dotted red;
}
#sidebar a.image-link:hover {
border-bottom: none;
}
Попробуй этот трюк. Он работает.
a { text-decoration:none; border-bottom:2px solid; }
a img { border:none; vertical-align:top; }
Другой способ - PHP:
$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text);